<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Documentation - Metronic Admin Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <!-- Le styles -->
        <link href="assets/css/bootstrap.css" rel="stylesheet" />
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="assets/google-code-prettify/prettify.css" rel="stylesheet" />
        <link href="assets/css/docs.css" rel="stylesheet" />
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png" />
        <style>
            .pluginwrap { display:none; } 
            .pluginwrapActive { display:block; }
        </style>
    </head>
    <body>
        <!-- Subhead
            ================================================== -->
        <header class="jumbotron subhead">
            <div class="container container-narrow">
                <h1>Metronic - Responsive Admin Dashboard Template</h1>
                <p class="lead">Documentation For Metronic Version 4.5.6</p>
            </div>
        </header>
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="well intro-text">
                        <h3>Thank You For Purchasing Metronic, One of Our Premium Items!</h3>
                        <p>
                            If you have any questions that are beyond the scope of this help file, please email our support 
                            <a href="mailto:support@keenthemes.com">support@keenthemes.com</a>.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top:20px;margin-bottom:20px">
                <div class="span12">
                    <table class="table table-bordered table-striped">
                        <tbody>
                            <tr>
                                <td width="50%">
                                    <ul class="menu">
                                        <h4>Overview</h4>
                                        <p>
                                            Metronic is a responsive and multipurpose admin theme powered with <a href="http://getbootstrap.com" target="_blank">Twitter Bootstrap 3.3.6 Framework</a>. Metronic can be used for any type of web applications: custom admin panels, admin dashboards, CMS, CRM, SAAS and more. Metronic has a sleek, clean and intuitive metro & flat balanced design which makes your next project look awesome and yet user friendly. Metronic has a huge collection of plugins and UI components and works seamlessly on all major web browsers, tablets and phones.
                                        </p>
                                        <p>
                                            We put a lot of love and effort to make Metronic a useful tool for everyone and now Metronic comes with 7 complete admin themes. We are keen to release continuous long term updates and dozens of new features will be coming soon in the future releases. Once you purchased Metronic, you will be entitled to free download of all future updates for the same license.
                                        </p>
                                        <P>
                                            We are keen to release continuous long term updates and dozens of new features will be coming soon in the future releases. Once you purchased Metronic, you will be entitled to free download of all future updates for the same license.
                                        </P>
                                        <hr>
                                        <p>
                                            Author:     <a href="http://www.keenthemes.com" target="_blank">KeenThemes</a><br>
                                            Contact:    <a href="mailto:support@keenthemes.com"    target="_blank">support@keenthemes.com</a><br>
                                            Follow:     <a href="http://twitter.com/keenthemes"     target="_blank">twitter.com/keenthemes</a><br>
                                            Like:       <a href="http://facebook.com/keenthemes"      target="_blank">facebook.com/keenthemes</a><br>
                                            Created On: 13/02/2013<br>
                                            Updated On: 21/04/2016<br>
                                        </p>
                                        <a class="btn btn-success" target="_blank" href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes">
                                        Live Preview 
                                        </a>
                                        <a class="btn btn-success" target="_blank" href="http://themeforest.net/user/keenthemes/portfolio">
                                        Other Themes <i class="icon-share-alt icon-white"></i>
                                        </a>
                                        <hr>
                                            <a class="btn btn-link" target="_blank" href="http://themeforest.net/item/jango-responsive-multipurpose-html5-template/11987314&ref=keenthemes">
                                            Jango - Ultimate Bootstrap Frontend Theme <i class="icon-share-alt"></i>
                                            </a><br>
                                            <a class="btn btn-link" target="_blank" href="http://aspnetzero.com/?ref=keen">
                                            Aspnetzero - .NET Starter Kit Based On Metronic Theme <i class="icon-share-alt"></i>
                                            </a>
                                        <hr>
                                        
                                        <p>
                                            <strong>
                                                NOTE: A single license can be used only for one domain or client. Each use of the theme requires a separate license. We hope you will follow the rules as it will help us to continue supporting our themes and providing a free future updates.
                                            </strong> 

                                           
                                        </p>

                                         <a href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes" target="_blank" class="btn btn-primary">Purchase A New License</a>
                                            <a href="http://themeforest.net/licenses/standard" target="_blank" class="btn btn-default">License Info</a>

                                            <hr>

                                        <p>
                                            <strong>
                                                NOTE: A single purchase includes 6 months support subscription and after this period expired in order to continue getting the theme support from us you will need to extend it by purchasing a new support subscription. 
                                                For more info please check <a href="https://help.market.envato.com/hc/en-us/articles/208191263-What-is-Item-Support-" target="_blank">Envato support rules</a> or
                                                <a href="http://themeforest.net/page/item_support_policy" target="_blank">support policy</a>.
                                            </strong>
                                        </p>

                                        <a href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes" target="_blank" class="btn btn-primary">Extend Support</a>
                                       
                                    </ul>
                                </td>
                                <td width="50%">
                                    <h4>Table of Contents:</h4>
                                    <ul class="menu">
                                        <li><a href="javascript:;" class="clickable" data-section="#overview">1. Overview</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#template_structure">2. Template Structure</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#font">3. Fonts</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#theme_config">4. Theme & Layout Configuration</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#top_menu">5. Top Menu</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#sidebar_menu">6. Sidebar Menu</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#hor_menu">7. Horizontal Menu</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#new_page">8. New Page</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#gulp">9. GULP Tasks</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#init">10. File Structure</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#extend">11. Coding & Extending</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#plugins">12. Javascript Plugins & Resources</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#references">13. References</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#log">14. Change Log</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#upgrade">15. Upgrade</a></li>
                                        <li><a href="javascript:;" class="clickable" data-section="#end">16. End of Documentation</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="template_structure">
                        <div class="page-header">
                            <h1>2. Template Structure</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            All template files have fixed structure consisting of <code>header</code>, <code>mega menu</code>, <code>top menu</code>, <code>user bar</code>, <code>sidebar menu</code>, <code>quick sidebar</code>, <code>content</code> and <code>footer</code> as shown below:
                        </p>
                        <img src="assets/i/layout.jpg">
                        <h3>
                            Beginning of Page  
                        </h3>
                        <p>
                            Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version 
                            and set a spesific class applied to Internet Explorer versions.
                        </p>
                        <pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;!--[if IE 8]&gt; &lt;html lang=&quot;en&quot; class=&quot;ie8&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 9]&gt; &lt;html lang=&quot;en&quot; class=&quot;ie9&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if !IE]&gt;&lt;!--&gt; &lt;html lang=&quot;en&quot;&gt; &lt;!--&lt;![endif]--&gt;
</pre>
                        <h3>Page Head</h3>
                        <p>
                            Page head contains metadata, javascript and css files:
                        </p>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN HEAD --&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;/&gt;
&lt;title&gt;Metronic | Admin Dashboard Template&lt;/title&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta content=&quot;width=device-width, initial-scale=1&quot; name=&quot;viewport&quot;/&gt;
&lt;meta content=&quot;&quot; name=&quot;description&quot;/&gt;
&lt;meta content=&quot;&quot; name=&quot;author&quot;/&gt;
&lt;!-- BEGIN GLOBAL MANDATORY STYLES --&gt;
&lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/font-awesome/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/simple-line-icons/simple-line-icons.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;!-- END GLOBAL MANDATORY STYLES --&gt;
&lt;!-- BEGIN PAGE LEVEL PLUGIN STYLES --&gt;
&lt;link href=&quot;../assets/global/plugins/gritter/css/jquery.gritter.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/jqvmap/jqvmap/jqvmap.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;!-- END PAGE LEVEL PLUGIN STYLES --&gt;
&lt;!-- BEGIN PAGE STYLES --&gt;
&lt;link href=&quot;../../assets/admin/pages/css/tasks.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;!-- END PAGE STYLES --&gt;
&lt;!-- BEGIN THEME STYLES --&gt;
&lt;link href=&quot;../assets/global/css/components.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/css/plugins.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/layouts/layout/css/layout.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/layouts/layout/css/themes/default.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; id=&quot;style_color&quot;/&gt;
&lt;link href=&quot;../assets/layouts/layout/css/custom.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;!-- END THEME STYLES --&gt;
&lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot;/&gt;
&lt;/head&gt;
&lt;!-- END HEAD --&gt;
</pre>
                        <h3>Header</h3>
                        <p>
                            Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below:   
                        </p>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN HEADER --&gt;
&lt;div class=&quot;page-header navbar navbar-fixed-top&quot;&gt;
    &lt;!-- BEGIN HEADER INNER --&gt;
    &lt;div class=&quot;page-header-inner&quot;&gt;
        &lt;!-- BEGIN LOGO --&gt;
        &lt;div class=&quot;page-logo&quot;&gt;
            &lt;a href=&quot;index.html&quot;&gt;
            &lt;img src=&quot;../assets/layouts/layout/img/logo.png&quot; alt=&quot;logo&quot; class=&quot;logo-default&quot;/&gt;
            &lt;/a&gt;
            &lt;div class=&quot;menu-toggler sidebar-toggler hide&quot;&gt;
                &lt;!-- DOC: Remove the above &quot;hide&quot; to enable the sidebar toggler button on header --&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END LOGO --&gt;
        &lt;!-- BEGIN RESPONSIVE MENU TOGGLER --&gt;
        &lt;a href=&quot;javascript:;&quot; class=&quot;menu-toggler responsive-toggler&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
        &lt;/a&gt;
        &lt;!-- END RESPONSIVE MENU TOGGLER --&gt;
        &lt;!-- BEGIN TOP NAVIGATION MENU --&gt;
        &lt;div class=&quot;top-menu&quot;&gt;
            &lt;ul class=&quot;nav navbar-nav pull-right&quot;&gt;
                &lt;!-- BEGIN NOTIFICATION DROPDOWN --&gt;
                &lt;li class=&quot;dropdown dropdown-extended dropdown-notification&quot; id=&quot;header_notification_bar&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
                    &lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;
                    &lt;span class=&quot;badge badge-default&quot;&gt;
                    7 &lt;/span&gt;
                    &lt;/a&gt;
                    &lt;ul class=&quot;dropdown-menu&quot;&gt;
                        &lt;li&gt;
                            &lt;p&gt;
                                 You have 14 new notifications
                            &lt;/p&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-success&quot;&gt;
                                    &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    New user registered. &lt;span class=&quot;time&quot;&gt;
                                    Just now &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                                    &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    Server #12 overloaded. &lt;span class=&quot;time&quot;&gt;
                                    15 mins &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;
                                    &lt;i class=&quot;fa fa-bell-o&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    Server #2 not responding. &lt;span class=&quot;time&quot;&gt;
                                    22 mins &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;
                                    &lt;i class=&quot;fa fa-bullhorn&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    Application error. &lt;span class=&quot;time&quot;&gt;
                                    40 mins &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                                    &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    Database overloaded 68%. &lt;span class=&quot;time&quot;&gt;
                                    2 hrs &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                                    &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    2 user IP blocked. &lt;span class=&quot;time&quot;&gt;
                                    5 hrs &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;
                                    &lt;i class=&quot;fa fa-bell-o&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    Storage Server #4 not responding. &lt;span class=&quot;time&quot;&gt;
                                    45 mins &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;
                                    &lt;i class=&quot;fa fa-bullhorn&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    System Error. &lt;span class=&quot;time&quot;&gt;
                                    55 mins &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                                    &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                    Database overloaded 68%. &lt;span class=&quot;time&quot;&gt;
                                    2 hrs &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;external&quot;&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            See all notifications &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;!-- END NOTIFICATION DROPDOWN --&gt;
                &lt;!-- BEGIN INBOX DROPDOWN --&gt;
                &lt;li class=&quot;dropdown dropdown-extended dropdown-inbox&quot; id=&quot;header_inbox_bar&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
                    &lt;i class=&quot;icon-envelope-open&quot;&gt;&lt;/i&gt;
                    &lt;span class=&quot;badge badge-default&quot;&gt;
                    4 &lt;/span&gt;
                    &lt;/a&gt;
                    &lt;ul class=&quot;dropdown-menu&quot;&gt;
                        &lt;li&gt;
                            &lt;p&gt;
                                 You have 12 new messages
                            &lt;/p&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                                    &lt;span class=&quot;photo&quot;&gt;
                                    &lt;img src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;subject&quot;&gt;
                                    &lt;span class=&quot;from&quot;&gt;
                                    Lisa Wong &lt;/span&gt;
                                    &lt;span class=&quot;time&quot;&gt;
                                    Just Now &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;message&quot;&gt;
                                    Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                                    &lt;span class=&quot;photo&quot;&gt;
                                    &lt;img src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;subject&quot;&gt;
                                    &lt;span class=&quot;from&quot;&gt;
                                    Richard Doe &lt;/span&gt;
                                    &lt;span class=&quot;time&quot;&gt;
                                    16 mins &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;message&quot;&gt;
                                    Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                                    &lt;span class=&quot;photo&quot;&gt;
                                    &lt;img src=&quot;../assets/layouts/layout/img/avatar1.jpg&quot; alt=&quot;&quot;/&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;subject&quot;&gt;
                                    &lt;span class=&quot;from&quot;&gt;
                                    Bob Nilson &lt;/span&gt;
                                    &lt;span class=&quot;time&quot;&gt;
                                    2 hrs &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;message&quot;&gt;
                                    Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                                    &lt;span class=&quot;photo&quot;&gt;
                                    &lt;img src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;subject&quot;&gt;
                                    &lt;span class=&quot;from&quot;&gt;
                                    Lisa Wong &lt;/span&gt;
                                    &lt;span class=&quot;time&quot;&gt;
                                    40 mins &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;message&quot;&gt;
                                    Vivamus sed auctor 40% nibh congue nibh... &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                                    &lt;span class=&quot;photo&quot;&gt;
                                    &lt;img src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;subject&quot;&gt;
                                    &lt;span class=&quot;from&quot;&gt;
                                    Richard Doe &lt;/span&gt;
                                    &lt;span class=&quot;time&quot;&gt;
                                    46 mins &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;message&quot;&gt;
                                    Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;external&quot;&gt;
                            &lt;a href=&quot;inbox.html&quot;&gt;
                            See all messages &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;!-- END INBOX DROPDOWN --&gt;
                &lt;!-- BEGIN TODO DROPDOWN --&gt;
                &lt;li class=&quot;dropdown dropdown-extended dropdown-tasks&quot; id=&quot;header_task_bar&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
                    &lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt;
                    &lt;span class=&quot;badge badge-default&quot;&gt;
                    3 &lt;/span&gt;
                    &lt;/a&gt;
                    &lt;ul class=&quot;dropdown-menu extended tasks&quot;&gt;
                        &lt;li&gt;
                            &lt;p&gt;
                                 You have 12 pending tasks
                            &lt;/p&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;task&quot;&gt;
                                    &lt;span class=&quot;desc&quot;&gt;
                                    New release v1.2 &lt;/span&gt;
                                    &lt;span class=&quot;percent&quot;&gt;
                                    30% &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;progress&quot;&gt;
                                    &lt;span style=&quot;width: 40%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                                    &lt;span class=&quot;sr-only&quot;&gt;
                                    40% Complete &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;task&quot;&gt;
                                    &lt;span class=&quot;desc&quot;&gt;
                                    Application deployment &lt;/span&gt;
                                    &lt;span class=&quot;percent&quot;&gt;
                                    65% &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;progress progress-striped&quot;&gt;
                                    &lt;span style=&quot;width: 65%;&quot; class=&quot;progress-bar progress-bar-danger&quot; aria-valuenow=&quot;65&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                                    &lt;span class=&quot;sr-only&quot;&gt;
                                    65% Complete &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;task&quot;&gt;
                                    &lt;span class=&quot;desc&quot;&gt;
                                    Mobile app release &lt;/span&gt;
                                    &lt;span class=&quot;percent&quot;&gt;
                                    98% &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;progress&quot;&gt;
                                    &lt;span style=&quot;width: 98%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;98&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                                    &lt;span class=&quot;sr-only&quot;&gt;
                                    98% Complete &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;task&quot;&gt;
                                    &lt;span class=&quot;desc&quot;&gt;
                                    Database migration &lt;/span&gt;
                                    &lt;span class=&quot;percent&quot;&gt;
                                    10% &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;progress progress-striped&quot;&gt;
                                    &lt;span style=&quot;width: 10%;&quot; class=&quot;progress-bar progress-bar-warning&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                                    &lt;span class=&quot;sr-only&quot;&gt;
                                    10% Complete &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;task&quot;&gt;
                                    &lt;span class=&quot;desc&quot;&gt;
                                    Web server upgrade &lt;/span&gt;
                                    &lt;span class=&quot;percent&quot;&gt;
                                    58% &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;progress progress-striped&quot;&gt;
                                    &lt;span style=&quot;width: 58%;&quot; class=&quot;progress-bar progress-bar-info&quot; aria-valuenow=&quot;58&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                                    &lt;span class=&quot;sr-only&quot;&gt;
                                    58% Complete &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;task&quot;&gt;
                                    &lt;span class=&quot;desc&quot;&gt;
                                    Mobile development &lt;/span&gt;
                                    &lt;span class=&quot;percent&quot;&gt;
                                    85% &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;progress progress-striped&quot;&gt;
                                    &lt;span style=&quot;width: 85%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;85&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                                    &lt;span class=&quot;sr-only&quot;&gt;
                                    85% Complete &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                    &lt;span class=&quot;task&quot;&gt;
                                    &lt;span class=&quot;desc&quot;&gt;
                                    New UI release &lt;/span&gt;
                                    &lt;span class=&quot;percent&quot;&gt;
                                    18% &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;span class=&quot;progress progress-striped&quot;&gt;
                                    &lt;span style=&quot;width: 18%;&quot; class=&quot;progress-bar progress-bar-important&quot; aria-valuenow=&quot;18&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                                    &lt;span class=&quot;sr-only&quot;&gt;
                                    18% Complete &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;external&quot;&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            See all tasks &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;!-- END TODO DROPDOWN --&gt;
                &lt;!-- BEGIN USER LOGIN DROPDOWN --&gt;
                &lt;li class=&quot;dropdown dropdown-user&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
                    &lt;img alt=&quot;&quot; class=&quot;img-circle&quot; src=&quot;../assets/layouts/layout/img/avatar3_small.jpg&quot;/&gt;
                    &lt;span class=&quot;username&quot;&gt;
                    Bob &lt;/span&gt;
                    &lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;ul class=&quot;dropdown-menu&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;extra_profile.html&quot;&gt;
                            &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt; My Profile &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;page_calendar.html&quot;&gt;
                            &lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt; My Calendar &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;inbox.html&quot;&gt;
                            &lt;i class=&quot;icon-envelope-open&quot;&gt;&lt;/i&gt; My Inbox &lt;span class=&quot;badge badge-danger&quot;&gt;
                            3 &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;i class=&quot;icon-rocket&quot;&gt;&lt;/i&gt; My Tasks &lt;span class=&quot;badge badge-success&quot;&gt;
                            7 &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;divider&quot;&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;extra_lock.html&quot;&gt;
                            &lt;i class=&quot;icon-lock&quot;&gt;&lt;/i&gt; Lock Screen &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;login.html&quot;&gt;
                            &lt;i class=&quot;icon-key&quot;&gt;&lt;/i&gt; Log Out &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;!-- END USER LOGIN DROPDOWN --&gt;
                &lt;!-- BEGIN QUICK SIDEBAR TOGGLER --&gt;
                &lt;li class=&quot;dropdown dropdown-quick-sidebar-toggler&quot;&gt;
                    &lt;a href=&quot;javascript:;&quot; class=&quot;dropdown-toggle&quot;&gt;
                    &lt;i class=&quot;icon-logout&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;!-- END QUICK SIDEBAR TOGGLER --&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- END TOP NAVIGATION MENU --&gt;
    &lt;/div&gt;
    &lt;!-- END HEADER INNER --&gt;
&lt;/div&gt;
&lt;!-- END HEADER --&gt;
</pre>
                        <h3>Sidebar</h3>
                        <p>
                            Sidebar contains of quick search form and main navigation menu. HTML code of sidebar container as shown below:   
                        </p>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN SIDEBAR --&gt;
&lt;div class=&quot;page-sidebar-wrapper&quot;&gt;
    &lt;!-- DOC: Set data-auto-scroll=&quot;false&quot; to disable the sidebar from auto scrolling/focusing --&gt;
    &lt;!-- DOC: Change data-auto-speed=&quot;200&quot; to adjust the sub menu slide up/down speed --&gt;
    &lt;div class=&quot;page-sidebar navbar-collapse collapse&quot;&gt;
        &lt;!-- BEGIN SIDEBAR MENU --&gt;
        &lt;ul class=&quot;page-sidebar-menu&quot; data-auto-scroll=&quot;true&quot; data-slide-speed=&quot;200&quot;&gt;
            &lt;!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below &quot;sidebar-toggler-wrapper&quot; LI element --&gt;
            &lt;li class=&quot;sidebar-toggler-wrapper&quot;&gt;
                &lt;!-- BEGIN SIDEBAR TOGGLER BUTTON --&gt;
                &lt;div class=&quot;sidebar-toggler&quot;&gt;
                &lt;/div&gt;
                &lt;!-- END SIDEBAR TOGGLER BUTTON --&gt;
            &lt;/li&gt;
            &lt;!-- DOC: To remove the search box from the sidebar you just need to completely remove the below &quot;sidebar-search-wrapper&quot; LI element --&gt;
            &lt;li class=&quot;sidebar-search-wrapper hidden-xs&quot;&gt;
                &lt;!-- BEGIN RESPONSIVE QUICK SEARCH FORM --&gt;
                &lt;!-- DOC: Apply &quot;sidebar-search-bordered&quot; class the below search form to have bordered search box --&gt;
                &lt;!-- DOC: Apply &quot;sidebar-search-bordered sidebar-search-solid&quot; class the below search form to have bordered &amp; solid search box --&gt;
                &lt;form class=&quot;sidebar-search&quot; action=&quot;extra_search.html&quot; method=&quot;POST&quot;&gt;
                    &lt;a href=&quot;javascript:;&quot; class=&quot;remove&quot;&gt;
                    &lt;i class=&quot;icon-close&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;div class=&quot;input-group&quot;&gt;
                        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot;&gt;
                        &lt;span class=&quot;input-group-btn&quot;&gt;
                        &lt;a href=&quot;javascript:;&quot; class=&quot;btn submit&quot;&gt;&lt;i class=&quot;icon-magnifier&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/span&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
                &lt;!-- END RESPONSIVE QUICK SEARCH FORM --&gt;
            &lt;/li&gt;
            &lt;li class=&quot;start active &quot;&gt;
                &lt;a href=&quot;index.html&quot;&gt;
                &lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Dashboard&lt;/span&gt;
                &lt;span class=&quot;selected&quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-basket&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;eCommerce&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ecommerce_index.html&quot;&gt;
                        &lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;
                        Dashboard&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ecommerce_orders.html&quot;&gt;
                        &lt;i class=&quot;icon-basket&quot;&gt;&lt;/i&gt;
                        Orders&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ecommerce_orders_view.html&quot;&gt;
                        &lt;i class=&quot;icon-tag&quot;&gt;&lt;/i&gt;
                        Order View&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ecommerce_products.html&quot;&gt;
                        &lt;i class=&quot;icon-handbag&quot;&gt;&lt;/i&gt;
                        Products&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ecommerce_products_edit.html&quot;&gt;
                        &lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt;
                        Product Edit&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-rocket&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Page Layouts&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_horizontal_sidebar_menu.html&quot;&gt;
                        Horizontal &amp; Sidebar Menu&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;index_horizontal_menu.html&quot;&gt;
                        Dashboard &amp; Mega Menu&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_horizontal_menu1.html&quot;&gt;
                        Horizontal Mega Menu 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_horizontal_menu2.html&quot;&gt;
                        Horizontal Mega Menu 2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_fontawesome_icons.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-danger&quot;&gt;new&lt;/span&gt;Layout with Fontawesome Icons&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_glyphicons.html&quot;&gt;
                        Layout with Glyphicon&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_full_height_portlet.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-success&quot;&gt;new&lt;/span&gt;Full Height Portlet&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_full_height_content.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;Full Height Content&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_search_on_header1.html&quot;&gt;
                        Search Box On Header 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_search_on_header2.html&quot;&gt;
                        Search Box On Header 2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_sidebar_search_option1.html&quot;&gt;
                        Sidebar Search Option 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_sidebar_search_option2.html&quot;&gt;
                        Sidebar Search Option 2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_sidebar_reversed.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;Right Sidebar Page&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_sidebar_fixed.html&quot;&gt;
                        Sidebar Fixed Page&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_sidebar_closed.html&quot;&gt;
                        Sidebar Closed Page&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_ajax.html&quot;&gt;
                        Content Loading via Ajax&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_disabled_menu.html&quot;&gt;
                        Disabled Menu Links&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_blank_page.html&quot;&gt;
                        Blank Page&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_boxed_page.html&quot;&gt;
                        Boxed Page&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;layout_language_bar.html&quot;&gt;
                        Language Switch Bar&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-diamond&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;UI Features&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_general.html&quot;&gt;
                        General Components&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_buttons.html&quot;&gt;
                        Buttons&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_icons.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-danger&quot;&gt;new&lt;/span&gt;Font Icons&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_colors.html&quot;&gt;
                        Flat UI Colors&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_typography.html&quot;&gt;
                        Typography&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_tabs_accordions_navs.html&quot;&gt;
                        Tabs, Accordions &amp; Navs&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_tree.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-danger&quot;&gt;new&lt;/span&gt;Tree View&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_page_progress_style_1.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;Page Progress Bar&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_blockui.html&quot;&gt;
                        Block UI&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_notific8.html&quot;&gt;
                        Notific8 Notifications&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_toastr.html&quot;&gt;
                        Toastr Notifications&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_alert_dialog_api.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-danger&quot;&gt;new&lt;/span&gt;Alerts &amp; Dialogs API&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_session_timeout.html&quot;&gt;
                        Session Timeout&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_idle_timeout.html&quot;&gt;
                        User Idle Timeout&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_modals.html&quot;&gt;
                        Modals&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_extended_modals.html&quot;&gt;
                        Extended Modals&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_tiles.html&quot;&gt;
                        Tiles&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_datepaginator.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-success&quot;&gt;new&lt;/span&gt;Date Paginator&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;ui_nestable.html&quot;&gt;
                        Nestable List&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-puzzle&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;UI Components&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_pickers.html&quot;&gt;
                        Pickers&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_dropdowns.html&quot;&gt;
                        Custom Dropdowns&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_form_tools.html&quot;&gt;
                        Form Tools&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_editors.html&quot;&gt;
                        Markdown &amp; WYSIWYG Editors&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_ion_sliders.html&quot;&gt;
                        Ion Range Sliders&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_noui_sliders.html&quot;&gt;
                        NoUI Range Sliders&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_jqueryui_sliders.html&quot;&gt;
                        jQuery UI Sliders&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;components_knob_dials.html&quot;&gt;
                        Knob Circle Dials&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-settings&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Form Stuff&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_controls.html&quot;&gt;
                        Form Controls&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_layouts.html&quot;&gt;
                        Form Layouts&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_editable.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;Form X-editable&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_wizard.html&quot;&gt;
                        Form Wizard&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_validation.html&quot;&gt;
                        Form Validation&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_image_crop.html&quot;&gt;
                        &lt;span class=&quot;badge badge-roundless badge-danger&quot;&gt;new&lt;/span&gt;Image Cropping&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_fileupload.html&quot;&gt;
                        Multiple File Upload&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;form_dropzone.html&quot;&gt;
                        Dropzone File Upload&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-logout&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Quick Sidebar&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;quick_sidebar_push_page.html&quot;&gt;
                        Push Page&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;quick_sidebar_push_content.html&quot;&gt;
                        Push Content&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;quick_sidebar_over_content.html&quot;&gt;
                        Over Content&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;quick_sidebar_over_content_transparent.html&quot;&gt;
                        Over Content &amp; Transparent&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;quick_sidebar_on_boxed_layout.html&quot;&gt;
                        Boxed Layout&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-envelope-open&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Email Templates&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;email_newsletter.html&quot;&gt;
                        Responsive Newsletter&lt;br&gt;
                        Email Template&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;email_system.html&quot;&gt;
                        Responsive System&lt;br&gt;
                        Email Template&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-docs&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Pages&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_portfolio.html&quot;&gt;
                        &lt;i class=&quot;icon-feed&quot;&gt;&lt;/i&gt;
                        &lt;span class=&quot;badge badge-warning badge-roundless&quot;&gt;new&lt;/span&gt;Portfolio&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_timeline.html&quot;&gt;
                        &lt;i class=&quot;icon-clock&quot;&gt;&lt;/i&gt;
                        &lt;span class=&quot;badge badge-info&quot;&gt;4&lt;/span&gt;Timeline&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_coming_soon.html&quot;&gt;
                        &lt;i class=&quot;icon-flag&quot;&gt;&lt;/i&gt;
                        Coming Soon&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_blog.html&quot;&gt;
                        &lt;i class=&quot;icon-speech&quot;&gt;&lt;/i&gt;
                        Blog&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_blog_item.html&quot;&gt;
                        &lt;i class=&quot;icon-link&quot;&gt;&lt;/i&gt;
                        Blog Post&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_news.html&quot;&gt;
                        &lt;i class=&quot;icon-eye&quot;&gt;&lt;/i&gt;
                        &lt;span class=&quot;badge badge-success&quot;&gt;9&lt;/span&gt;News&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_news_item.html&quot;&gt;
                        &lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;
                        News View&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_about.html&quot;&gt;
                        &lt;i class=&quot;icon-users&quot;&gt;&lt;/i&gt;
                        About Us&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_contact.html&quot;&gt;
                        &lt;i class=&quot;icon-envelope-open&quot;&gt;&lt;/i&gt;
                        Contact Us&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;page_calendar.html&quot;&gt;
                        &lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt;
                        &lt;span class=&quot;badge badge-danger&quot;&gt;14&lt;/span&gt;Calendar&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-present&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Extra&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_profile.html&quot;&gt;
                        User Profile&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_lock.html&quot;&gt;
                        Lock Screen&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_faq.html&quot;&gt;
                        FAQ&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;inbox.html&quot;&gt;
                        &lt;span class=&quot;badge badge-danger&quot;&gt;4&lt;/span&gt;Inbox&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_search.html&quot;&gt;
                        Search Results&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_invoice.html&quot;&gt;
                        Invoice&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_pricing_table.html&quot;&gt;
                        Pricing Tables&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_404_option1.html&quot;&gt;
                        404 Page Option 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_404_option2.html&quot;&gt;
                        404 Page Option 2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_404_option3.html&quot;&gt;
                        404 Page Option 3&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_500_option1.html&quot;&gt;
                        500 Page Option 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;extra_500_option2.html&quot;&gt;
                        500 Page Option 2&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-folder&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Multi Level Menu&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;javascript:;&quot;&gt;
                        &lt;i class=&quot;icon-settings&quot;&gt;&lt;/i&gt; Item 1 &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                        &lt;/a&gt;
                        &lt;ul class=&quot;sub-menu&quot;&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;javascript:;&quot;&gt;
                                &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;
                                Sample Link 1 &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                &lt;/a&gt;
                                &lt;ul class=&quot;sub-menu&quot;&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-power&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-paper-plane&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-star&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-camera&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-link&quot;&gt;&lt;/i&gt; Sample Link 2&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-pointer&quot;&gt;&lt;/i&gt; Sample Link 3&lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;javascript:;&quot;&gt;
                        &lt;i class=&quot;icon-globe&quot;&gt;&lt;/i&gt; Item 2 &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                        &lt;/a&gt;
                        &lt;ul class=&quot;sub-menu&quot;&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tag&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-graph&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;#&quot;&gt;
                        &lt;i class=&quot;icon-bar-chart&quot;&gt;&lt;/i&gt;
                        Item 3 &lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Login Options&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;login.html&quot;&gt;
                        Login Form 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;login_soft.html&quot;&gt;
                        Login Form 2&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-briefcase&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Data Tables&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;table_basic.html&quot;&gt;
                        Basic Datatables&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;table_responsive.html&quot;&gt;
                        Responsive Datatables&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;table_managed.html&quot;&gt;
                        Managed Datatables&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;table_editable.html&quot;&gt;
                        Editable Datatables&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;table_advanced.html&quot;&gt;
                        Advanced Datatables&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;table_ajax.html&quot;&gt;
                        Ajax Datatables&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-wallet&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Portlets&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;portlet_general.html&quot;&gt;
                        General Portlets&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;portlet_ajax.html&quot;&gt;
                        Ajax Portlets&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;portlet_draggable.html&quot;&gt;
                        Draggable Portlets&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;javascript:;&quot;&gt;
                &lt;i class=&quot;icon-pointer&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Maps&lt;/span&gt;
                &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;sub-menu&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;maps_google.html&quot;&gt;
                        Google Maps&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;maps_vector.html&quot;&gt;
                        Vector Maps&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class=&quot;last &quot;&gt;
                &lt;a href=&quot;charts.html&quot;&gt;
                &lt;i class=&quot;icon-bar-chart&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;title&quot;&gt;Visual Charts&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;!-- END SIDEBAR MENU --&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END SIDEBAR --&gt;
</pre>
                        <h3>Quick Sidebar</h3>
                        <p>
                            Quick Sidebar contains of user chat, notifications and general settings form. HTML code of sidebar container as shown below:   
                        </p>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN QUICK SIDEBAR --&gt;
&lt;a href=&quot;javascript:;&quot; class=&quot;page-quick-sidebar-toggler&quot;&gt;&lt;i class=&quot;icon-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;div class=&quot;page-quick-sidebar-wrapper&quot;&gt;
    &lt;div class=&quot;page-quick-sidebar&quot;&gt;
        &lt;div class=&quot;nav-justified&quot;&gt;
            &lt;ul class=&quot;nav nav-tabs nav-justified&quot;&gt;
                &lt;li class=&quot;active&quot;&gt;
                    &lt;a href=&quot;#quick_sidebar_tab_1&quot; data-toggle=&quot;tab&quot;&gt;
                    Users &lt;span class=&quot;badge badge-danger&quot;&gt;2&lt;/span&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#quick_sidebar_tab_2&quot; data-toggle=&quot;tab&quot;&gt;
                    Alerts &lt;span class=&quot;badge badge-success&quot;&gt;7&lt;/span&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;dropdown&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
                    More&lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;ul class=&quot;dropdown-menu pull-right&quot; role=&quot;menu&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#quick_sidebar_tab_3&quot; data-toggle=&quot;tab&quot;&gt;
                            &lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt; Alerts &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#quick_sidebar_tab_3&quot; data-toggle=&quot;tab&quot;&gt;
                            &lt;i class=&quot;icon-info&quot;&gt;&lt;/i&gt; Notifications &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#quick_sidebar_tab_3&quot; data-toggle=&quot;tab&quot;&gt;
                            &lt;i class=&quot;icon-speech&quot;&gt;&lt;/i&gt; Activities &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;divider&quot;&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#quick_sidebar_tab_3&quot; data-toggle=&quot;tab&quot;&gt;
                            &lt;i class=&quot;icon-settings&quot;&gt;&lt;/i&gt; Settings &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class=&quot;tab-content&quot;&gt;
                &lt;div class=&quot;tab-pane active page-quick-sidebar-chat&quot; id=&quot;quick_sidebar_tab_1&quot;&gt;
                    &lt;div class=&quot;page-quick-sidebar-chat-users&quot; data-rail-color=&quot;#ddd&quot; data-wrapper-class=&quot;page-quick-sidebar-list&quot;&gt;
                        &lt;h3 class=&quot;list-heading&quot;&gt;Staff&lt;/h3&gt;
                        &lt;ul class=&quot;media-list list-items&quot;&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;div class=&quot;media-status&quot;&gt;
                                    &lt;span class=&quot;badge badge-success&quot;&gt;8&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Bob Nilson&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        Project Manager
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar1.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Nick Larson&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        Art Director
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;div class=&quot;media-status&quot;&gt;
                                    &lt;span class=&quot;badge badge-danger&quot;&gt;3&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar4.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Deon Hubert&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        CTO
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Ella Wong&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        CEO
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;h3 class=&quot;list-heading&quot;&gt;Customers&lt;/h3&gt;
                        &lt;ul class=&quot;media-list list-items&quot;&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;div class=&quot;media-status&quot;&gt;
                                    &lt;span class=&quot;badge badge-warning&quot;&gt;2&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar6.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Lara Kunis&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        CEO, Loop Inc
                                    &lt;/div&gt;
                                    &lt;div class=&quot;media-heading-small&quot;&gt;
                                        Last seen 03:10 AM
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;div class=&quot;media-status&quot;&gt;
                                    &lt;span class=&quot;label label-sm label-success&quot;&gt;new&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar7.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Ernie Kyllonen&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        Project Manager,&lt;br&gt;
                                        SmartBizz PTL
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar8.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Lisa Stone&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        CTO, Keort Inc
                                    &lt;/div&gt;
                                    &lt;div class=&quot;media-heading-small&quot;&gt;
                                        Last seen 13:10 PM
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;div class=&quot;media-status&quot;&gt;
                                    &lt;span class=&quot;badge badge-success&quot;&gt;7&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar9.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Deon Portalatin&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        CFO, H&amp;D LTD
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar10.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Irina Savikova&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        CEO, Tizda Motors Inc
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;media&quot;&gt;
                                &lt;div class=&quot;media-status&quot;&gt;
                                    &lt;span class=&quot;badge badge-danger&quot;&gt;4&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;img class=&quot;media-object&quot; src=&quot;../assets/layouts/layout/img/avatar11.jpg&quot; alt=&quot;...&quot;&gt;
                                &lt;div class=&quot;media-body&quot;&gt;
                                    &lt;h4 class=&quot;media-heading&quot;&gt;Maria Gomez&lt;/h4&gt;
                                    &lt;div class=&quot;media-heading-sub&quot;&gt;
                                        Manager, Infomatic Inc
                                    &lt;/div&gt;
                                    &lt;div class=&quot;media-heading-small&quot;&gt;
                                        Last seen 03:10 AM
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;page-quick-sidebar-item&quot;&gt;
                        &lt;div class=&quot;page-quick-sidebar-chat-user&quot;&gt;
                            &lt;div class=&quot;page-quick-sidebar-nav&quot;&gt;
                                &lt;a href=&quot;javascript:;&quot; class=&quot;page-quick-sidebar-back-to-list&quot;&gt;&lt;i class=&quot;icon-arrow-left&quot;&gt;&lt;/i&gt;Back&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;page-quick-sidebar-chat-user-messages&quot;&gt;
                                &lt;div class=&quot;post out&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Bob Nilson&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:15&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        When could you send me the report ? &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post in&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Ella Wong&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:15&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        Its almost done. I will be sending it shortly &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post out&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Bob Nilson&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:15&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        Alright. Thanks! :) &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post in&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Ella Wong&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:16&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        You are most welcome. Sorry for the delay. &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post out&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Bob Nilson&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:17&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        No probs. Just take your time :) &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post in&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Ella Wong&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:40&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        Alright. I just emailed it to you. &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post out&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Bob Nilson&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:17&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        Great! Thanks. Will check it right away. &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post in&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Ella Wong&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:40&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        Please let me know if you have any comment. &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;post out&quot;&gt;
                                    &lt;img class=&quot;avatar&quot; alt=&quot;&quot; src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot;/&gt;
                                    &lt;div class=&quot;message&quot;&gt;
                                        &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                                        &lt;a href=&quot;#&quot; class=&quot;name&quot;&gt;Bob Nilson&lt;/a&gt;
                                        &lt;span class=&quot;datetime&quot;&gt;20:17&lt;/span&gt;
                                        &lt;span class=&quot;body&quot;&gt;
                                        Sure. I will check and buzz you if anything needs to be corrected. &lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;page-quick-sidebar-chat-user-form&quot;&gt;
                                &lt;div class=&quot;input-group&quot;&gt;
                                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Type a message here...&quot;&gt;
                                    &lt;div class=&quot;input-group-btn&quot;&gt;
                                        &lt;button type=&quot;button&quot; class=&quot;btn blue&quot;&gt;&lt;i class=&quot;icon-paper-clip&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;tab-pane page-quick-sidebar-alerts&quot; id=&quot;quick_sidebar_tab_2&quot;&gt;
                    &lt;div class=&quot;page-quick-sidebar-alerts-list&quot;&gt;
                        &lt;h3 class=&quot;list-heading&quot;&gt;General&lt;/h3&gt;
                        &lt;ul class=&quot;feeds list-items&quot;&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-info&quot;&gt;
                                                &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                You have 4 pending tasks. &lt;span class=&quot;label label-sm label-warning &quot;&gt;
                                                Take action &lt;i class=&quot;fa fa-share&quot;&gt;&lt;/i&gt;
                                                &lt;/span&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        Just now
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;
                                    &lt;div class=&quot;col1&quot;&gt;
                                        &lt;div class=&quot;cont&quot;&gt;
                                            &lt;div class=&quot;cont-col1&quot;&gt;
                                                &lt;div class=&quot;label label-sm label-success&quot;&gt;
                                                    &lt;i class=&quot;fa fa-bar-chart-o&quot;&gt;&lt;/i&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class=&quot;cont-col2&quot;&gt;
                                                &lt;div class=&quot;desc&quot;&gt;
                                                    Finance Report for year 2013 has been released.
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col2&quot;&gt;
                                        &lt;div class=&quot;date&quot;&gt;
                                            20 mins
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-danger&quot;&gt;
                                                &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                You have 5 pending membership that requires a quick review.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        24 mins
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-info&quot;&gt;
                                                &lt;i class=&quot;fa fa-shopping-cart&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                New order received with &lt;span class=&quot;label label-sm label-success&quot;&gt;
                                                Reference Number: DR23923 &lt;/span&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        30 mins
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-success&quot;&gt;
                                                &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                You have 5 pending membership that requires a quick review.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        24 mins
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-info&quot;&gt;
                                                &lt;i class=&quot;fa fa-bell-o&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                Web server hardware needs to be upgraded. &lt;span class=&quot;label label-sm label-warning&quot;&gt;
                                                Overdue &lt;/span&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        2 hours
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;
                                    &lt;div class=&quot;col1&quot;&gt;
                                        &lt;div class=&quot;cont&quot;&gt;
                                            &lt;div class=&quot;cont-col1&quot;&gt;
                                                &lt;div class=&quot;label label-sm label-default&quot;&gt;
                                                    &lt;i class=&quot;fa fa-briefcase&quot;&gt;&lt;/i&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class=&quot;cont-col2&quot;&gt;
                                                &lt;div class=&quot;desc&quot;&gt;
                                                    IPO Report for year 2013 has been released.
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col2&quot;&gt;
                                        &lt;div class=&quot;date&quot;&gt;
                                            20 mins
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;h3 class=&quot;list-heading&quot;&gt;System&lt;/h3&gt;
                        &lt;ul class=&quot;feeds list-items&quot;&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-info&quot;&gt;
                                                &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                You have 4 pending tasks. &lt;span class=&quot;label label-sm label-warning &quot;&gt;
                                                Take action &lt;i class=&quot;fa fa-share&quot;&gt;&lt;/i&gt;
                                                &lt;/span&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        Just now
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;
                                    &lt;div class=&quot;col1&quot;&gt;
                                        &lt;div class=&quot;cont&quot;&gt;
                                            &lt;div class=&quot;cont-col1&quot;&gt;
                                                &lt;div class=&quot;label label-sm label-danger&quot;&gt;
                                                    &lt;i class=&quot;fa fa-bar-chart-o&quot;&gt;&lt;/i&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class=&quot;cont-col2&quot;&gt;
                                                &lt;div class=&quot;desc&quot;&gt;
                                                    Finance Report for year 2013 has been released.
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col2&quot;&gt;
                                        &lt;div class=&quot;date&quot;&gt;
                                            20 mins
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-default&quot;&gt;
                                                &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                You have 5 pending membership that requires a quick review.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        24 mins
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-info&quot;&gt;
                                                &lt;i class=&quot;fa fa-shopping-cart&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                New order received with &lt;span class=&quot;label label-sm label-success&quot;&gt;
                                                Reference Number: DR23923 &lt;/span&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        30 mins
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-success&quot;&gt;
                                                &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                You have 5 pending membership that requires a quick review.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        24 mins
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;col1&quot;&gt;
                                    &lt;div class=&quot;cont&quot;&gt;
                                        &lt;div class=&quot;cont-col1&quot;&gt;
                                            &lt;div class=&quot;label label-sm label-warning&quot;&gt;
                                                &lt;i class=&quot;fa fa-bell-o&quot;&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;cont-col2&quot;&gt;
                                            &lt;div class=&quot;desc&quot;&gt;
                                                Web server hardware needs to be upgraded. &lt;span class=&quot;label label-sm label-default &quot;&gt;
                                                Overdue &lt;/span&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col2&quot;&gt;
                                    &lt;div class=&quot;date&quot;&gt;
                                        2 hours
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href=&quot;#&quot;&gt;
                                    &lt;div class=&quot;col1&quot;&gt;
                                        &lt;div class=&quot;cont&quot;&gt;
                                            &lt;div class=&quot;cont-col1&quot;&gt;
                                                &lt;div class=&quot;label label-sm label-info&quot;&gt;
                                                    &lt;i class=&quot;fa fa-briefcase&quot;&gt;&lt;/i&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class=&quot;cont-col2&quot;&gt;
                                                &lt;div class=&quot;desc&quot;&gt;
                                                    IPO Report for year 2013 has been released.
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col2&quot;&gt;
                                        &lt;div class=&quot;date&quot;&gt;
                                            20 mins
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;tab-pane page-quick-sidebar-settings&quot; id=&quot;quick_sidebar_tab_3&quot;&gt;
                    &lt;div class=&quot;page-quick-sidebar-settings-list&quot;&gt;
                        &lt;h3 class=&quot;list-heading&quot;&gt;General Settings&lt;/h3&gt;
                        &lt;ul class=&quot;list-items borderless&quot;&gt;
                            &lt;li&gt;
                                Enable Notifications &lt;input type=&quot;checkbox&quot; class=&quot;make-switch&quot; checked data-size=&quot;small&quot; data-on-color=&quot;success&quot; data-on-text=&quot;ON&quot; data-off-color=&quot;default&quot; data-off-text=&quot;OFF&quot;&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Allow Tracking &lt;input type=&quot;checkbox&quot; class=&quot;make-switch&quot; data-size=&quot;small&quot; data-on-color=&quot;info&quot; data-on-text=&quot;ON&quot; data-off-color=&quot;default&quot; data-off-text=&quot;OFF&quot;&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Log Errors &lt;input type=&quot;checkbox&quot; class=&quot;make-switch&quot; checked data-size=&quot;small&quot; data-on-color=&quot;danger&quot; data-on-text=&quot;ON&quot; data-off-color=&quot;default&quot; data-off-text=&quot;OFF&quot;&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Auto Sumbit Issues &lt;input type=&quot;checkbox&quot; class=&quot;make-switch&quot; data-size=&quot;small&quot; data-on-color=&quot;warning&quot; data-on-text=&quot;ON&quot; data-off-color=&quot;default&quot; data-off-text=&quot;OFF&quot;&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Enable SMS Alerts &lt;input type=&quot;checkbox&quot; class=&quot;make-switch&quot; checked data-size=&quot;small&quot; data-on-color=&quot;success&quot; data-on-text=&quot;ON&quot; data-off-color=&quot;default&quot; data-off-text=&quot;OFF&quot;&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;h3 class=&quot;list-heading&quot;&gt;System Settings&lt;/h3&gt;
                        &lt;ul class=&quot;list-items borderless&quot;&gt;
                            &lt;li&gt;
                                Security Level
                                &lt;select class=&quot;form-control input-inline input-sm input-small&quot;&gt;
                                    &lt;option value=&quot;1&quot;&gt;Normal&lt;/option&gt;
                                    &lt;option value=&quot;2&quot; selected&gt;Medium&lt;/option&gt;
                                    &lt;option value=&quot;e&quot;&gt;High&lt;/option&gt;
                                &lt;/select&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Failed Email Attempts &lt;input class=&quot;form-control input-inline input-sm input-small&quot; value=&quot;5&quot;/&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Secondary SMTP Port &lt;input class=&quot;form-control input-inline input-sm input-small&quot; value=&quot;3560&quot;/&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Notify On System Error &lt;input type=&quot;checkbox&quot; class=&quot;make-switch&quot; checked data-size=&quot;small&quot; data-on-color=&quot;danger&quot; data-on-text=&quot;ON&quot; data-off-color=&quot;default&quot; data-off-text=&quot;OFF&quot;&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                Notify On SMTP Error &lt;input type=&quot;checkbox&quot; class=&quot;make-switch&quot; checked data-size=&quot;small&quot; data-on-color=&quot;warning&quot; data-on-text=&quot;ON&quot; data-off-color=&quot;default&quot; data-off-text=&quot;OFF&quot;&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;div class=&quot;inner-content&quot;&gt;
                            &lt;button class=&quot;btn btn-success&quot;&gt;&lt;i class=&quot;icon-settings&quot;&gt;&lt;/i&gt; Save Changes&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END QUICK SIDEBAR --&gt;
</pre>
                        <h3>Content</h3>
                        <p>
                            Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:   
                        </p>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN CONTENT --&gt;
&lt;div class=&quot;page-content-wrapper&quot;&gt;
    &lt;div class=&quot;page-content&quot;&gt;
        &lt;!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM--&gt;
        &lt;div class=&quot;modal fade&quot; id=&quot;portlet-config&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;div class=&quot;modal-dialog&quot;&gt;
                &lt;div class=&quot;modal-content&quot;&gt;
                    &lt;div class=&quot;modal-header&quot;&gt;
                        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&lt;/button&gt;
                        &lt;h4 class=&quot;modal-title&quot;&gt;Modal title&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;modal-body&quot;&gt;
                        Widget settings form goes here
                    &lt;/div&gt;
                    &lt;div class=&quot;modal-footer&quot;&gt;
                        &lt;button type=&quot;button&quot; class=&quot;btn blue&quot;&gt;Save changes&lt;/button&gt;
                        &lt;button type=&quot;button&quot; class=&quot;btn default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /.modal-content --&gt;
            &lt;/div&gt;
            &lt;!-- /.modal-dialog --&gt;
        &lt;/div&gt;
        &lt;!-- /.modal --&gt;
        &lt;!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM--&gt;
        &lt;!-- BEGIN STYLE CUSTOMIZER --&gt;
        &lt;div class=&quot;theme-panel hidden-xs hidden-sm&quot;&gt;
            &lt;div class=&quot;toggler&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;toggler-close&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;theme-options&quot;&gt;
                &lt;div class=&quot;theme-option theme-colors clearfix&quot;&gt;
                    &lt;span&gt;
                    THEME COLOR &lt;/span&gt;
                    &lt;ul&gt;
                        &lt;li class=&quot;color-default current tooltips&quot; data-style=&quot;default&quot; data-container=&quot;body&quot; data-original-title=&quot;Default&quot;&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;color-darkblue tooltips&quot; data-style=&quot;darkblue&quot; data-container=&quot;body&quot; data-original-title=&quot;Dark Blue&quot;&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;color-blue tooltips&quot; data-style=&quot;blue&quot; data-container=&quot;body&quot; data-original-title=&quot;Blue&quot;&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;color-grey tooltips&quot; data-style=&quot;grey&quot; data-container=&quot;body&quot; data-original-title=&quot;Grey&quot;&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;color-light tooltips&quot; data-style=&quot;light&quot; data-container=&quot;body&quot; data-original-title=&quot;Light&quot;&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;color-light2 tooltips&quot; data-style=&quot;light2&quot; data-container=&quot;body&quot; data-html=&quot;true&quot; data-original-title=&quot;Light 2&quot;&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class=&quot;theme-option&quot;&gt;
                    &lt;span&gt;
                    Layout &lt;/span&gt;
                    &lt;select class=&quot;layout-option form-control input-small&quot;&gt;
                        &lt;option value=&quot;fluid&quot; selected=&quot;selected&quot;&gt;Fluid&lt;/option&gt;
                        &lt;option value=&quot;boxed&quot;&gt;Boxed&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class=&quot;theme-option&quot;&gt;
                    &lt;span&gt;
                    Header &lt;/span&gt;
                    &lt;select class=&quot;page-header-option form-control input-small&quot;&gt;
                        &lt;option value=&quot;fixed&quot; selected=&quot;selected&quot;&gt;Fixed&lt;/option&gt;
                        &lt;option value=&quot;default&quot;&gt;Default&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class=&quot;theme-option&quot;&gt;
                    &lt;span&gt;
                    Sidebar Mode&lt;/span&gt;
                    &lt;select class=&quot;sidebar-option form-control input-small&quot;&gt;
                        &lt;option value=&quot;fixed&quot;&gt;Fixed&lt;/option&gt;
                        &lt;option value=&quot;default&quot; selected=&quot;selected&quot;&gt;Default&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class=&quot;theme-option&quot;&gt;
                    &lt;span&gt;
                    Sidebar Menu &lt;/span&gt;
                    &lt;select class=&quot;sidebar-menu-option form-control input-small&quot;&gt;
                        &lt;option value=&quot;accordion&quot; selected=&quot;selected&quot;&gt;Accordion&lt;/option&gt;
                        &lt;option value=&quot;hover&quot;&gt;Hover&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class=&quot;theme-option&quot;&gt;
                    &lt;span&gt;
                    Sidebar Style &lt;/span&gt;
                    &lt;select class=&quot;sidebar-style-option form-control input-small&quot;&gt;
                        &lt;option value=&quot;default&quot; selected=&quot;selected&quot;&gt;Default&lt;/option&gt;
                        &lt;option value=&quot;light&quot;&gt;Light&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class=&quot;theme-option&quot;&gt;
                    &lt;span&gt;
                    Sidebar Position &lt;/span&gt;
                    &lt;select class=&quot;sidebar-pos-option form-control input-small&quot;&gt;
                        &lt;option value=&quot;left&quot; selected=&quot;selected&quot;&gt;Left&lt;/option&gt;
                        &lt;option value=&quot;right&quot;&gt;Right&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class=&quot;theme-option&quot;&gt;
                    &lt;span&gt;
                    Footer &lt;/span&gt;
                    &lt;select class=&quot;page-footer-option form-control input-small&quot;&gt;
                        &lt;option value=&quot;fixed&quot;&gt;Fixed&lt;/option&gt;
                        &lt;option value=&quot;default&quot; selected=&quot;selected&quot;&gt;Default&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END STYLE CUSTOMIZER --&gt;
        &lt;!-- BEGIN PAGE HEADER--&gt;
        &lt;h3 class=&quot;page-title&quot;&gt;
            Blank Page &lt;small&gt;blank page&lt;/small&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;page-bar&quot;&gt;
            &lt;ul class=&quot;page-breadcrumb&quot;&gt;
                &lt;li&gt;
                    &lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;
                    &lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;
                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;Page Layouts&lt;/a&gt;
                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;Blank Page&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class=&quot;page-toolbar&quot;&gt;
                &lt;div class=&quot;btn-group pull-right&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-fit-height grey-salt dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-delay=&quot;1000&quot; data-close-others=&quot;true&quot;&gt;
                    Actions &lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;ul class=&quot;dropdown-menu pull-right&quot; role=&quot;menu&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;divider&quot;&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END PAGE HEADER--&gt;
        &lt;!-- BEGIN PAGE CONTENT--&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-12&quot;&gt;
                Page content goes here
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END PAGE CONTENT--&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END CONTENT --&gt;
</pre>
                        <h3>Footer</h3>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN FOOTER --&gt;
&lt;div class=&quot;page-footer&quot;&gt;
    &lt;div class=&quot;page-footer-inner&quot;&gt;
         2014 &amp;copy; Metronic by keenthemes.
    &lt;/div&gt;
    &lt;div class=&quot;page-footer-tools&quot;&gt;
        &lt;span class=&quot;go-top&quot;&gt;
        &lt;i class=&quot;fa fa-angle-up&quot;&gt;&lt;/i&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END FOOTER --&gt;
</pre>
                        <h3>End Of Page(Javascripts)</h3> 
                        <p>Javascript files loaded in the end of page. This will reduce page load time.</p>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --&gt;
&lt;!-- BEGIN CORE PLUGINS --&gt;
&lt;!--[if lt IE 9]&gt;
&lt;script src=&quot;../assets/global/plugins/respond.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/excanvas.min.js&quot;&gt;&lt;/script&gt; 
&lt;![endif]--&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-1.11.0.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-migrate-1.2.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap/js/bootstrap.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery.blockui.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery.cokie.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;!-- END CORE PLUGINS --&gt;
&lt;!-- BEGIN PAGE LEVEL PLUGINS --&gt;
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/flot/jquery.flot.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/flot/jquery.flot.resize.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/flot/jquery.flot.categories.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery.pulsate.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap-daterangepicker/moment.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;!-- IMPORTANT! fullcalendar depends on jquery-ui-1.10.3.custom.min.js for drag &amp; drop support --&gt;
&lt;script src=&quot;../assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery.sparkline.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/gritter/js/jquery.gritter.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;!-- END PAGE LEVEL PLUGINS --&gt;
&lt;!-- BEGIN PAGE LEVEL SCRIPTS --&gt;
&lt;script src=&quot;../assets/global/scripts/metronic.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/layouts/layout/scripts/layout.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/layouts/layout/scripts/quick-sidebar.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../../assets/admin/pages/scripts/index.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../../assets/admin/pages/scripts/tasks.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;!-- END PAGE LEVEL SCRIPTS --&gt;
&lt;script&gt;
jQuery(document).ready(function() {    
   App.init(); // init metronic core componets
   Layout.init(); // init layout
   QuickSidebar.init() // init quick sidebar
   Index.init();   
   Index.initDashboardDaterange();
   Index.initJQVMAP(); // init index page's custom scripts
   Index.initCalendar(); // init index page's custom scripts
   Index.initCharts(); // init index page's custom scripts
   Index.initChat();
   Index.initMiniCharts();
   Index.initIntro();
   Tasks.initDashboardWidget();
});
&lt;/script&gt;
&lt;!-- END JAVASCRIPTS --&gt;
</pre>
                        <h3>HTML Code Comment Sample</h3>
                        <p>
                            All the html, css and javascript file contents have easy to refer and meaningful comments:
                        </p>
                        <pre class="prettyprint linenums">&lt;!-- BEGIN LOGO --&gt;
&lt;a class=&quot;brand&quot; href=&quot;index.html&quot;&gt;
&lt;img src=&quot;../assets/global/plugins/img/logo.png&quot; alt=&quot;logo&quot; /&gt;
&lt;/a&gt;
&lt;!-- END LOGO --&gt;
&lt;!-- BEGIN RESPONSIVE MENU TOGGLER --&gt;
&lt;a href=&quot;javascript:;&quot; class=&quot;btn-navbar collapsed&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.nav-collapse&quot;&gt;
&lt;img src=&quot;../assets/global/plugins/img/menu-toggler.png&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;          
&lt;!-- END RESPONSIVE MENU TOGGLER --&gt;</pre>
                        <h3>CSS Code Comment Sample</h3>
                        <pre class="prettyprint linenums">
/***
Header and header elements.
***/
.header {
  padding: 0 !important;
  margin: 0 !important;
}

.header .brand {
  margin-top: -1px;
}
          </pre>
                        <h3>Javascript Code Comment Sample</h3>
                        <pre class="prettyprint linenums">var initDrag = function (el) {
  // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  // it doesn't need to have a start or end
  var eventObject = {
      title: $.trim(el.text()) // use the element's text as the event title
  };
  // store the Event Object in the DOM element so we can get to it later
  el.data('eventObject', eventObject);
  // make the event draggable using jQuery UI
}</pre>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="font">
                        <div class="page-header">
                            <h1>3. Fonts</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            Metronic uses Open Sans font from google fonts. The font must be loaded in HTML heade before the rest of css files:</code>
                        </p>
                        <pre class="prettyprint linenums">
&lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="theme_config">
                        <div class="page-header">
                            <h1>4. Theme & Layout Configuration</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <h3>Theme Setup</h3>
                        <p>
                            Metronic comes with 6 color themes, <code>default</code>, <code>darkblue</code>, <code>blue</code>, <code>grey</code>, <code>light</code>, <code>light2</code>.
                            To setup a selected theme. Include <code>../assets/layouts/layout/css/themes/[theme_name].css</code> in page head.
                            For instance, if you like to use blue theme, include <code>../assets/layouts/layout/css/themes/darkblue.css</code> css file. CSS file load order should be followed as shown below:
                        </p>
                        <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/layouts/layout/css/themes/default.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; id=&quot;style_color&quot;/&gt;
</pre>
                        <h3>Theme Style</h3>
                        <p>
                            Metronic by default comes with "square corners" style. To change it to "rounded corners" just change "components.css" to "components-rounded.css" as shown below:
                        </p>

                        <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/css/components-rounded.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; id=&quot;style_components&quot;/&gt;
</pre>


                        <h3>Layout Settings</h3>
                        <p>
                            The best way to learn how to use Metronic's available layout options, please go to one of Metronic pages and use the "Theme Settings" panel located at the top right of the page.
                            Choose you preferred layout options, and use <code>Chrome's Developer Tool</code> and <code>Firefox's Firebug Tool</code> to see the HTML code changes upon you select your layout combination.
                            When you change the laypout option, mostly some css classes will be added into the page's body element. When you change the  layout settings only the most parent HTML elements will be modified, the page content part remains as it is.
                        </p>
                        <p>

                            To learn how to use the browser developer tools you can refer to below links:
                        </p>
                        <p>

                            <a href="https://developer.mozilla.org/en/docs/Debugging_JavaScript" target="_blank">https://developer.mozilla.org/en/docs/Debugging_JavaScript</a><br>
                            <a href="https://developers.google.com/chrome-developer-tools/docs/javascript-debugging"  target="_blank">https://developers.google.com/chrome-developer-tools/docs/javascript-debugging</a>
                        </p>
                        <h3>Fixed Header & Footer On Mobile Devices</h3>
                        <p>
                            If fixed header or footer is set then by default these features will be disabled on mobile devices. To force the fixed header & footer on mobile devices 
                            you will need to apply <code>page-footer-fixed page-footer-fixed-mobile</code> and <code>page-header-fixed page-header-fixed-mobile</code> classes to the HTML body element accordingly. 
                        </p>
                        <h3>Sidebar Menu Settings</h3>
                        <p>
                            By default the sidebar menu comes with <code>data-auto-scroll="true"</code> and <code>data-slide-speed="200"</code> settings. To disable the auto scrolling feature of the sidebar menu apply 
                            <code>data-auto-scroll="false"</code> parameter to the sidebar menu's HTML tag(page-sidebar-menu). To change the submenu's slide speed apply a new value as <code>data-slide-speed="300"</code>.
                        </p>
                        <h3>Sidebar Menu Light Style</h3>
                        <p>
                            To use the light sidebar menu style you will need to apply <code>page-sidebar-menu-light</code> class right after <code>
                            page-sidebar-menu</code> class.
                        </p>
                        <h3>Sidebar Menu With Hover Submenus</h3>
                        <p>
                            To use this feature you will need to apply <code>page-sidebar-menu-hover-submenu</code> class right after <code>
                            page-sidebar-menu</code> class.
                        </p>                        
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="top_menu">
                        <div class="page-header">
                            <h1>5. Top Menu</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            Top menu enables an easy access to most frequently accessed information and pages.
                        </p>
                        <img src="assets/i/top_menu_1.png" class="img-polaroid">
                        <img src="assets/i/top_menu_2.jpg" class="img-polaroid">
                        </i>
                        <h3>Top Menu Dropdown Options</h3>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN TOP NAVIGATION MENU --&gt;
&lt;div class=&quot;top-menu&quot;&gt;
    &lt;ul class=&quot;nav navbar-nav pull-right&quot;&gt;
        &lt;!-- BEGIN NOTIFICATION DROPDOWN --&gt;
        &lt;li class=&quot;dropdown dropdown-extended dropdown-notification&quot; id=&quot;header_notification_bar&quot;&gt;
            &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
            &lt;i class=&quot;fa fa-warning&quot;&gt;&lt;/i&gt;
            &lt;span class=&quot;badge badge-default&quot;&gt;
            7 &lt;/span&gt;
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu&quot;&gt;
                &lt;li&gt;
                    &lt;p&gt;
                        You have 14 new notifications
                    &lt;/p&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-success&quot;&gt;
                            &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            New user registered. &lt;span class=&quot;time&quot;&gt;
                            Just now &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                            &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            Server #12 overloaded. &lt;span class=&quot;time&quot;&gt;
                            15 mins &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;
                            &lt;i class=&quot;fa fa-bell-o&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            Server #2 not responding. &lt;span class=&quot;time&quot;&gt;
                            22 mins &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;
                            &lt;i class=&quot;fa fa-bullhorn&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            Application error. &lt;span class=&quot;time&quot;&gt;
                            40 mins &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                            &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            Database overloaded 68%. &lt;span class=&quot;time&quot;&gt;
                            2 hrs &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                            &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            2 user IP blocked. &lt;span class=&quot;time&quot;&gt;
                            5 hrs &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;
                            &lt;i class=&quot;fa fa-bell-o&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            Storage Server #4 not responding. &lt;span class=&quot;time&quot;&gt;
                            45 mins &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;
                            &lt;i class=&quot;fa fa-bullhorn&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            System Error. &lt;span class=&quot;time&quot;&gt;
                            55 mins &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;
                            &lt;i class=&quot;fa fa-bolt&quot;&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            Database overloaded 68%. &lt;span class=&quot;time&quot;&gt;
                            2 hrs &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class=&quot;external&quot;&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    See all notifications &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;!-- END NOTIFICATION DROPDOWN --&gt;
        &lt;!-- BEGIN INBOX DROPDOWN --&gt;
        &lt;li class=&quot;dropdown dropdown-extended dropdown-inbox&quot; id=&quot;header_inbox_bar&quot;&gt;
            &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
            &lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;
            &lt;span class=&quot;badge badge-default&quot;&gt;
            4 &lt;/span&gt;
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu&quot;&gt;
                &lt;li&gt;
                    &lt;p&gt;
                        You have 12 new messages
                    &lt;/p&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                            &lt;span class=&quot;photo&quot;&gt;
                            &lt;img src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;subject&quot;&gt;
                            &lt;span class=&quot;from&quot;&gt;
                            Lisa Wong &lt;/span&gt;
                            &lt;span class=&quot;time&quot;&gt;
                            Just Now &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;message&quot;&gt;
                            Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                            &lt;span class=&quot;photo&quot;&gt;
                            &lt;img src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;subject&quot;&gt;
                            &lt;span class=&quot;from&quot;&gt;
                            Richard Doe &lt;/span&gt;
                            &lt;span class=&quot;time&quot;&gt;
                            16 mins &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;message&quot;&gt;
                            Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                            &lt;span class=&quot;photo&quot;&gt;
                            &lt;img src=&quot;../assets/layouts/layout/img/avatar1.jpg&quot; alt=&quot;&quot;/&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;subject&quot;&gt;
                            &lt;span class=&quot;from&quot;&gt;
                            Bob Nilson &lt;/span&gt;
                            &lt;span class=&quot;time&quot;&gt;
                            2 hrs &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;message&quot;&gt;
                            Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                            &lt;span class=&quot;photo&quot;&gt;
                            &lt;img src=&quot;../assets/layouts/layout/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;subject&quot;&gt;
                            &lt;span class=&quot;from&quot;&gt;
                            Lisa Wong &lt;/span&gt;
                            &lt;span class=&quot;time&quot;&gt;
                            40 mins &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;message&quot;&gt;
                            Vivamus sed auctor 40% nibh congue nibh... &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                            &lt;span class=&quot;photo&quot;&gt;
                            &lt;img src=&quot;../assets/layouts/layout/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;subject&quot;&gt;
                            &lt;span class=&quot;from&quot;&gt;
                            Richard Doe &lt;/span&gt;
                            &lt;span class=&quot;time&quot;&gt;
                            46 mins &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;message&quot;&gt;
                            Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class=&quot;external&quot;&gt;
                    &lt;a href=&quot;inbox.html&quot;&gt;
                    See all messages &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;!-- END INBOX DROPDOWN --&gt;
        &lt;!-- BEGIN TODO DROPDOWN --&gt;
        &lt;li class=&quot;dropdown dropdown-extended dropdown-tasks&quot; id=&quot;header_task_bar&quot;&gt;
            &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
            &lt;i class=&quot;fa fa-tasks&quot;&gt;&lt;/i&gt;
            &lt;span class=&quot;badge badge-default&quot;&gt;
            3 &lt;/span&gt;
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu extended tasks&quot;&gt;
                &lt;li&gt;
                    &lt;p&gt;
                        You have 12 pending tasks
                    &lt;/p&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;task&quot;&gt;
                            &lt;span class=&quot;desc&quot;&gt;
                            New release v1.2 &lt;/span&gt;
                            &lt;span class=&quot;percent&quot;&gt;
                            30% &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;progress&quot;&gt;
                            &lt;span style=&quot;width: 40%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                            &lt;span class=&quot;sr-only&quot;&gt;
                            40% Complete &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;task&quot;&gt;
                            &lt;span class=&quot;desc&quot;&gt;
                            Application deployment &lt;/span&gt;
                            &lt;span class=&quot;percent&quot;&gt;
                            65% &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;progress progress-striped&quot;&gt;
                            &lt;span style=&quot;width: 65%;&quot; class=&quot;progress-bar progress-bar-danger&quot; aria-valuenow=&quot;65&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                            &lt;span class=&quot;sr-only&quot;&gt;
                            65% Complete &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;task&quot;&gt;
                            &lt;span class=&quot;desc&quot;&gt;
                            Mobile app release &lt;/span&gt;
                            &lt;span class=&quot;percent&quot;&gt;
                            98% &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;progress&quot;&gt;
                            &lt;span style=&quot;width: 98%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;98&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                            &lt;span class=&quot;sr-only&quot;&gt;
                            98% Complete &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;task&quot;&gt;
                            &lt;span class=&quot;desc&quot;&gt;
                            Database migration &lt;/span&gt;
                            &lt;span class=&quot;percent&quot;&gt;
                            10% &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;progress progress-striped&quot;&gt;
                            &lt;span style=&quot;width: 10%;&quot; class=&quot;progress-bar progress-bar-warning&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                            &lt;span class=&quot;sr-only&quot;&gt;
                            10% Complete &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;task&quot;&gt;
                            &lt;span class=&quot;desc&quot;&gt;
                            Web server upgrade &lt;/span&gt;
                            &lt;span class=&quot;percent&quot;&gt;
                            58% &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;progress progress-striped&quot;&gt;
                            &lt;span style=&quot;width: 58%;&quot; class=&quot;progress-bar progress-bar-info&quot; aria-valuenow=&quot;58&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                            &lt;span class=&quot;sr-only&quot;&gt;
                            58% Complete &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;task&quot;&gt;
                            &lt;span class=&quot;desc&quot;&gt;
                            Mobile development &lt;/span&gt;
                            &lt;span class=&quot;percent&quot;&gt;
                            85% &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;progress progress-striped&quot;&gt;
                            &lt;span style=&quot;width: 85%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;85&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                            &lt;span class=&quot;sr-only&quot;&gt;
                            85% Complete &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            &lt;span class=&quot;task&quot;&gt;
                            &lt;span class=&quot;desc&quot;&gt;
                            New UI release &lt;/span&gt;
                            &lt;span class=&quot;percent&quot;&gt;
                            18% &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;span class=&quot;progress progress-striped&quot;&gt;
                            &lt;span style=&quot;width: 18%;&quot; class=&quot;progress-bar progress-bar-important&quot; aria-valuenow=&quot;18&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                            &lt;span class=&quot;sr-only&quot;&gt;
                            18% Complete &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class=&quot;external&quot;&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    See all tasks &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;!-- END TODO DROPDOWN --&gt;
        &lt;!-- BEGIN USER LOGIN DROPDOWN --&gt;
        &lt;!-- BEGIN USER LOGIN DROPDOWN --&gt;
        &lt;li class=&quot;dropdown dropdown-user&quot;&gt;
            &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
            &lt;img alt=&quot;&quot; class=&quot;img-circle&quot; src=&quot;../assets/layouts/layout/img/avatar3_small.jpg&quot;/&gt;
            &lt;span class=&quot;username&quot;&gt;
            Bob &lt;/span&gt;
            &lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu&quot;&gt;
                &lt;li&gt;
                    &lt;a href=&quot;extra_profile.html&quot;&gt;
                    &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; My Profile &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;page_calendar.html&quot;&gt;
                    &lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt; My Calendar &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;inbox.html&quot;&gt;
                    &lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt; My Inbox &lt;span class=&quot;badge badge-danger&quot;&gt;
                    3 &lt;/span&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    &lt;i class=&quot;fa fa-tasks&quot;&gt;&lt;/i&gt; My Tasks &lt;span class=&quot;badge badge-success&quot;&gt;
                    7 &lt;/span&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;divider&quot;&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;extra_lock.html&quot;&gt;
                    &lt;i class=&quot;fa fa-lock&quot;&gt;&lt;/i&gt; Lock Screen &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;login.html&quot;&gt;
                    &lt;i class=&quot;fa fa-key&quot;&gt;&lt;/i&gt; Log Out &lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;!-- END USER LOGIN DROPDOWN --&gt;
        &lt;!-- END USER LOGIN DROPDOWN --&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;!-- END TOP NAVIGATION MENU --&gt;
              </pre>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="sidebar_menu">
                        <div class="page-header">
                            <h1>6. Sidebar Menu</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            Metronic supports flexible 4 level sidebar navigation menu.
                        </p>
                        <img src="assets/i/main_menu.jpg" class="img-polaroid">
                        </i>
                        <h3>Sidebar Menu Options</h3>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN SIDEBAR --&gt;
&lt;div class=&quot;page-sidebar navbar-collapse collapse&quot;&gt;
  &lt;!-- BEGIN SIDEBAR MENU --&gt;         
  &lt;ul class=&quot;page-sidebar-menu&quot;&gt;
    &lt;li&gt;
      &lt;!-- BEGIN SIDEBAR TOGGLER BUTTON --&gt;
      &lt;div class=&quot;sidebar-toggler hidden-phone&quot;&gt;&lt;/div&gt;
      &lt;!-- BEGIN SIDEBAR TOGGLER BUTTON --&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;!-- BEGIN RESPONSIVE QUICK SEARCH FORM --&gt;
      &lt;form class=&quot;sidebar-search&quot; action=&quot;&quot; method=&quot;&quot;&gt;
        &lt;div class=&quot;form-container&quot;&gt;
          &lt;div class=&quot;input-box&quot;&gt;
            &lt;a href=&quot;javascript:;&quot; class=&quot;remove&quot;&gt;&lt;/a&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Search...&quot;/&gt;
            &lt;input type=&quot;button&quot; class=&quot;submit&quot; value=&quot; &quot;/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;!-- END RESPONSIVE QUICK SEARCH FORM --&gt;
    &lt;/li&gt;
    &lt;li class=&quot;start active &quot;&gt;
      &lt;a href=&quot;index.html&quot;&gt;
      &lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Dashboard&lt;/span&gt;          
      &lt;span class=&quot;selected&quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-cogs&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Layouts&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_language_bar.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-important&quot;&gt;new&lt;/span&gt;                            Language Switch Bar             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_sidebar_menu.html&quot;&gt;
          Horizontal &amp; Sidebar Menu             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_menu1.html&quot;&gt;
          Horizontal Menu 1             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_menu2.html&quot;&gt;
          Horizontal Menu 2             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_sidebar_fixed.html&quot;&gt;
          Sidebar Fixed Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_sidebar_closed.html&quot;&gt;
          Sidebar Closed Page             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_blank_page.html&quot;&gt;
          Blank Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_boxed_page.html&quot;&gt;
          Boxed Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_boxed_not_responsive.html&quot;&gt;
          Non-Responsive Boxed Layout             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_promo.html&quot;&gt;
          Promo Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_email.html&quot;&gt;
          Email Templates             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_ajax.html&quot;&gt;
          Content Loading via Ajax              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-bookmark-empty&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;UI Features&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_general.html&quot;&gt;
          General             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_buttons.html&quot;&gt;
          Buttons             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_typography.html&quot;&gt;
          Typography              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_modals.html&quot;&gt;
          Modals              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_tabs_accordions_navs.html&quot;&gt;
          Tabs, Accordions &amp; Navs             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_tiles.html&quot;&gt;
          Tiles             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_toastr.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;                            Toastr Notifications              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_tree.html&quot;&gt;
          Tree View             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_nestable.html&quot;&gt;
          Nestable List             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_ion_sliders.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-important&quot;&gt;new&lt;/span&gt;                            Ion Range Sliders             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_noui_sliders.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-success&quot;&gt;new&lt;/span&gt;                            NoUI Range Sliders              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_jqueryui_sliders.html&quot;&gt;
          jQuery UI Sliders             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_knob.html&quot;&gt;
          Knob Circle Dials             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-table&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Form Stuff&lt;/span&gt;         
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_controls.html&quot;&gt;
          Form Controls             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_layouts.html&quot;&gt;
          Form Layouts              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_component.html&quot;&gt;
          Form Components             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_editable.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;                            Form X-editable             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_wizard.html&quot;&gt;
          Form Wizard             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_validation.html&quot;&gt;
          Form Validation             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_image_crop.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-important&quot;&gt;new&lt;/span&gt;                            Image Cropping              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_fileupload.html&quot;&gt;
          Multiple File Upload              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_dropzone.html&quot;&gt;
          Dropzone File Upload              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-sitemap&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Pages&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_portfolio.html&quot;&gt;
          &lt;i class=&quot;icon-briefcase&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-warning badge-roundless&quot;&gt;new&lt;/span&gt;                            Portfolio             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_timeline.html&quot;&gt;
          &lt;i class=&quot;icon-time&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-info&quot;&gt;4&lt;/span&gt;                           Timeline              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_coming_soon.html&quot;&gt;
          &lt;i class=&quot;icon-cogs&quot;&gt;&lt;/i&gt;
          Coming Soon             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_blog.html&quot;&gt;
          &lt;i class=&quot;icon-comments&quot;&gt;&lt;/i&gt;
          Blog              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_blog_item.html&quot;&gt;
          &lt;i class=&quot;icon-font&quot;&gt;&lt;/i&gt;
          Blog Post             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_news.html&quot;&gt;
          &lt;i class=&quot;icon-coffee&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-success&quot;&gt;9&lt;/span&gt;                            News              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_news_item.html&quot;&gt;
          &lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;
          News View             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_about.html&quot;&gt;
          &lt;i class=&quot;icon-group&quot;&gt;&lt;/i&gt;
          About Us              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_contact.html&quot;&gt;
          &lt;i class=&quot;icon-envelope-alt&quot;&gt;&lt;/i&gt;
          Contact Us              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_calendar.html&quot;&gt;
          &lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-important&quot;&gt;14&lt;/span&gt;                           Calendar              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-gift&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Extra&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_profile.html&quot;&gt;
          User Profile              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_lock.html&quot;&gt;
          Lock Screen             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_faq.html&quot;&gt;
          FAQ             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;inbox.html&quot;&gt;
          &lt;span class=&quot;badge badge-important&quot;&gt;4&lt;/span&gt;                            Inbox             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_search.html&quot;&gt;
          Search Results              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_invoice.html&quot;&gt;
          Invoice             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_pricing_table.html&quot;&gt;
          Pricing Tables              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_404_option1.html&quot;&gt;
          404 Page Option 1             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_404_option2.html&quot;&gt;
          404 Page Option 2             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_404_option3.html&quot;&gt;
          404 Page Option 3             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_500_option1.html&quot;&gt;
          500 Page Option 1             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_500_option2.html&quot;&gt;
          500 Page Option 2             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class=&quot;active&quot; href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-leaf&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;3 Level Menu&lt;/span&gt;
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          Item 1
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          Item 1
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
          Item 3
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-folder-open&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;4 Level Menu&lt;/span&gt;
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          &lt;i class=&quot;icon-cogs&quot;&gt;&lt;/i&gt; 
          Item 1
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;
              &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;
              Sample Link 1
              &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class=&quot;sub-menu&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-external-link&quot;&gt;&lt;/i&gt;  Sample Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;  Sample Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          &lt;i class=&quot;icon-globe&quot;&gt;&lt;/i&gt; 
          Item 2
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-external-link&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
          &lt;i class=&quot;icon-folder-open&quot;&gt;&lt;/i&gt;
          Item 3
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Login Options&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;login.html&quot;&gt;
          Login Form 1              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;login_soft.html&quot;&gt;
          Login Form 2              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-th&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Data Tables&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_basic.html&quot;&gt;
          Basic Tables              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_responsive.html&quot;&gt;
          Responsive Tables             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_managed.html&quot;&gt;
          Managed Tables              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_editable.html&quot;&gt;
          Editable Tables             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_advanced.html&quot;&gt;
          Advanced Tables             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-file-text&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Portlets&lt;/span&gt;         
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;portlet_general.html&quot;&gt;
          General Portlets              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;portlet_draggable.html&quot;&gt;
          Draggable Portlets              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-map-marker&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Maps&lt;/span&gt;         
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;maps_google.html&quot;&gt;
          Google Maps             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;maps_vector.html&quot;&gt;
          Vector Maps             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;last &quot;&gt;
      &lt;a href=&quot;charts.html&quot;&gt;
      &lt;i class=&quot;icon-bar-chart&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Visual Charts&lt;/span&gt;          
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- END SIDEBAR MENU --&gt;
&lt;/div&gt;
&lt;!-- END SIDEBAR --&gt;
              </pre>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="hor_menu">
                        <div class="page-header">
                            <h1>7. Horizontal Menu</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            Metronic supports flexible 4 level horizontal navigation menu.
                        </p>
                        <img src="assets/i/hor_menu.jpg" class="img-polaroid">
                        </i>
                        <h3>Horizontal Menu Options</h3>
                        <pre class="prettyprint linenums">
&lt;!-- BEGIN HORIZANTAL MENU --&gt;
&lt;div class=&quot;hor-menu hidden-sm hidden-xs&quot;&gt;
    &lt;ul class=&quot;nav navbar-nav&quot;&gt;
        &lt;!-- DOC: Remove data-hover=&quot;dropdown&quot; and data-close-others=&quot;true&quot; attributes below to disable the horizontal opening on mouse hover --&gt;
        &lt;li class=&quot;classic-menu-dropdown active&quot;&gt;
            &lt;a href=&quot;index.html&quot;&gt;
            Dashboard &lt;span class=&quot;selected&quot;&gt;
            &lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;mega-menu-dropdown&quot;&gt;
            &lt;a data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot; data-toggle=&quot;dropdown&quot; href=&quot;javascript:;&quot; class=&quot;dropdown-toggle&quot;&gt;
            Mega &lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu&quot;&gt;
                &lt;li&gt;
                    &lt;!-- Content container to add padding --&gt;
                    &lt;div class=&quot;mega-menu-content&quot;&gt;
                        &lt;div class=&quot;row&quot;&gt;
                            &lt;ul class=&quot;col-md-4 mega-menu-submenu&quot;&gt;
                                &lt;li&gt;
                                    &lt;h3&gt;Layouts&lt;/h3&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;index_horizontal_menu.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Dashboard &amp; Mega Menu &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_horizontal_sidebar_menu.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Horizontal &amp; Sidebar Menu &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_glyphicons.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;
                                    Layout with Glyphicon &lt;span class=&quot;badge badge-roundless badge-danger&quot;&gt;
                                    new &lt;/span&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_horizontal_menu1.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Horizontal Mega Menu 1 &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_horizontal_menu2.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Horizontal Mega Menu 2 &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_search_on_header1.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Search Box On Header 1 &lt;/a&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;ul class=&quot;col-md-4 mega-menu-submenu&quot;&gt;
                                &lt;li&gt;
                                    &lt;h3&gt;More Layouts&lt;/h3&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_search_on_header2.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Search Box On Header 2 &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_sidebar_search_option1.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Search Option 1 &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_sidebar_search_option2.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Search Option 2 &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_sidebar_reversed.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Right Sidebar Page &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_sidebar_fixed.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Fixed Page &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_sidebar_closed.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Closed Page &lt;/a&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;ul class=&quot;col-md-4 mega-menu-submenu&quot;&gt;
                                &lt;li&gt;
                                    &lt;h3&gt;Even More!&lt;/h3&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_ajax.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Content Loading via Ajax &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_disabled_menu.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Disabled Menu Links &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_blank_page.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Blank Page &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_boxed_page.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Boxed Page &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;layout_language_bar.html&quot;&gt;
                                    &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Language Switch Bar &lt;/a&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;mega-menu-dropdown mega-menu-full&quot;&gt;
            &lt;a data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot; data-toggle=&quot;dropdown&quot; href=&quot;javascript:;&quot; class=&quot;dropdown-toggle&quot;&gt;
            Full Mega &lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu&quot;&gt;
                &lt;li&gt;
                    &lt;!-- Content container to add padding --&gt;
                    &lt;div class=&quot;mega-menu-content &quot;&gt;
                        &lt;div class=&quot;row&quot;&gt;
                            &lt;div class=&quot;col-md-7&quot;&gt;
                                &lt;ul class=&quot;col-md-4 mega-menu-submenu&quot;&gt;
                                    &lt;li&gt;
                                        &lt;h3&gt;Layouts&lt;/h3&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;index_horizontal_menu.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Dashboard &amp; Mega Menu &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_horizontal_sidebar_menu.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Horizontal &amp; Sidebar Menu &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_glyphicons.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;
                                        Layout with Glyphicon &lt;span class=&quot;badge badge-roundless badge-danger&quot;&gt;
                                        new &lt;/span&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_horizontal_menu1.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Horizontal Mega Menu 1 &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_horizontal_menu2.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Horizontal Mega Menu 2 &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_search_on_header1.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Search Box On Header 1 &lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                                &lt;ul class=&quot;col-md-4 mega-menu-submenu&quot;&gt;
                                    &lt;li&gt;
                                        &lt;h3&gt;More Layouts&lt;/h3&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_search_on_header2.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Search Box On Header 2 &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_sidebar_search_option1.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Search Option 1 &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_sidebar_search_option2.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Search Option 2 &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_sidebar_reversed.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Right Sidebar Page &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_sidebar_fixed.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Fixed Page &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_sidebar_closed.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Sidebar Closed Page &lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                                &lt;ul class=&quot;col-md-4 mega-menu-submenu&quot;&gt;
                                    &lt;li&gt;
                                        &lt;h3&gt;Even More!&lt;/h3&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_disabled_menu.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Disabled Menu Links &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_blank_page.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Blank Page &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_boxed_page.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Boxed Page &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_language_bar.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Language Switch Bar &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=&quot;layout_ajax.html&quot;&gt;
                                        &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt; Content Loading via Ajax &lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;col-md-5&quot;&gt;
                                &lt;div id=&quot;accordion&quot; class=&quot;panel-group&quot;&gt;
                                    &lt;div class=&quot;panel panel-success&quot;&gt;
                                        &lt;div class=&quot;panel-heading&quot;&gt;
                                            &lt;h4 class=&quot;panel-title&quot;&gt;
                                                &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#collapseOne&quot; class=&quot;collapsed&quot;&gt;
                                                Mega Menu Info #1 &lt;/a&gt;
                                            &lt;/h4&gt;
                                        &lt;/div&gt;
                                        &lt;div id=&quot;collapseOne&quot; class=&quot;panel-collapse in&quot;&gt;
                                            &lt;div class=&quot;panel-body&quot;&gt;
                                                Metronic Mega Menu Works for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;panel panel-danger&quot;&gt;
                                        &lt;div class=&quot;panel-heading&quot;&gt;
                                            &lt;h4 class=&quot;panel-title&quot;&gt;
                                                &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#collapseTwo&quot; class=&quot;collapsed&quot;&gt;
                                                Mega Menu Info #2 &lt;/a&gt;
                                            &lt;/h4&gt;
                                        &lt;/div&gt;
                                        &lt;div id=&quot;collapseTwo&quot; class=&quot;panel-collapse collapse&quot;&gt;
                                            &lt;div class=&quot;panel-body&quot;&gt;
                                                Metronic Mega Menu Works for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;panel panel-info&quot;&gt;
                                        &lt;div class=&quot;panel-heading&quot;&gt;
                                            &lt;h4 class=&quot;panel-title&quot;&gt;
                                                &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#collapseThree&quot;&gt;
                                                Mega Menu Info #3 &lt;/a&gt;
                                            &lt;/h4&gt;
                                        &lt;/div&gt;
                                        &lt;div id=&quot;collapseThree&quot; class=&quot;panel-collapse collapse&quot;&gt;
                                            &lt;div class=&quot;panel-body&quot;&gt;
                                                Metronic Mega Menu Works for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;classic-menu-dropdown&quot;&gt;
            &lt;a data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot; data-toggle=&quot;dropdown&quot; href=&quot;javascript:;&quot;&gt;
            Classic &lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu pull-left&quot;&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    &lt;i class=&quot;fa fa-bookmark-o&quot;&gt;&lt;/i&gt; Section 1 &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; Section 2 &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    &lt;i class=&quot;fa fa-puzzle-piece&quot;&gt;&lt;/i&gt; Section 3 &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    &lt;i class=&quot;fa fa-gift&quot;&gt;&lt;/i&gt; Section 4 &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href=&quot;#&quot;&gt;
                    &lt;i class=&quot;fa fa-table&quot;&gt;&lt;/i&gt; Section 5 &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;dropdown-submenu&quot;&gt;
                    &lt;a href=&quot;javascript:;&quot;&gt;
                    &lt;i class=&quot;fa fa-envelope-o&quot;&gt;&lt;/i&gt; More options &lt;/a&gt;
                    &lt;ul class=&quot;dropdown-menu&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;
                            Second level link &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;dropdown-submenu&quot;&gt;
                            &lt;a href=&quot;javascript:;&quot;&gt;
                            More options &lt;/a&gt;
                            &lt;ul class=&quot;dropdown-menu&quot;&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;index.html&quot;&gt;
                                    Third level link &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;index.html&quot;&gt;
                                    Third level link &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;index.html&quot;&gt;
                                    Third level link &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;index.html&quot;&gt;
                                    Third level link &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href=&quot;index.html&quot;&gt;
                                    Third level link &lt;/a&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;index.html&quot;&gt;
                            Second level link &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;index.html&quot;&gt;
                            Second level link &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;index.html&quot;&gt;
                            Second level link &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href=&quot;&quot;&gt;
            Link &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;!-- END HORIZANTAL MENU --&gt;
              </pre>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="new_page">
                        <div class="page-header">
                            <h1>8. New Page</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            To create a new page, you can use <code>layout_blank_page.html</code> which provides basic page layout 
                            which you can extend and modify further.
                        </p>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="gulp">
                        <div class="page-header">
                            <h1>9. GULP Tasks</h1> 
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>

                        <p>
                        <a href="http://gulpjs.com/" target="_blank">Gulp</a> is a toolkit that will help you automate painful or time-consuming tasks in your development workflow.
                        To get started first install Node.js as gulp require npm to run. It can be downloaded at <a href="http://nodejs.org/download/">http://nodejs.org/download/</a>. We can now install Gulp using npm. To install Gulp just follow below steps:
                        </p>
                        <ol>
                            <li>
                            Open the command line and change the directory into the theme's root, where the gulpfile.js is located.<br>
                            </li>
                            <li>
                            Run <code>npm install</code> to install the required gulp dependencies.<br>
                            </li>
                            <li>
                            Run <code>npm install gulp -g</code> to ensure Gulp is available globally for any project.<br>
                            </li>
                        </ol>
                        <br><br>

                        <h4>1. SASS Compilation</h4> 
                        <ol>
                            <li>
                            Launch cmd.exe and CD to your theme directly where gulpfile.js is located
                            </li>
                            <li>
                            Run <code>gulp sass</code> command to run the build task manually.
                             </li>
                            <li>
                            Run <code>gulp sass:watch</code> to run the scss file watcher task to compile the css files realtime.
                            </li>
                        </ol>
                        The compiled css files will be generated in [assets] directory.

                        <br><br>                      
                        <h4>2. CSS & JS File Minification</h4> 
                        <ol>
                            <li>
                            Launch cmd.exe and CD to your theme directly where gulpfile.js is located
                            </li>
                            <li>
                            Run <code>gulp minify</code> command to run the task to monify the theme's css and js files.
                             </li>
                        </ol>
                        The minified files will be generated in [assets] directory.
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="init">
                        <div class="page-header">
                            <h1>10. File Structure</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            Metronic supports multi themes and the core components including all the 3rd party plugins can be used accros all the themes.
                        </p>

                        <h3>Metronic Theme Folder Structure</h3>
                        <table class="table table-bordered table-striped1" width="600">
                            <thead>
                                <tr>
                                    <th width="30%">Folder</th>
                                    <th width="70%">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code><i class="icon icon-minus"></i>metronic</code></td>
                                    <td>Root folder</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 25px"><code><i class="icon icon-minus"></i>theme</code></td>
                                    <td>Assets folder contains of compiled css files, plugins, images and other files used by the theme</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>assets</code></td>
                                    <td>Contains of the admin theme's css, javascript and image files</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>sass</code></td>
                                    <td>Contains of the Metronic's SASS file source used to generate CSS files</td>
                                </tr>
                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_1</code></td>
                                    <td>Admin 1 theme HTML templates</td>
                                </tr>                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_1_rounded</code></td>
                                    <td>Admin 1 theme's Rounded Corners version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_1_angularjs</code></td>
                                    <td>Admin 1 theme's AngularJS version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_1_material_design</code></td>
                                    <td>Admin 1 theme's Material Design version HTML templates</td>
                                </tr>

                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_2</code></td>
                                    <td>Admin 2 theme HTML templates</td>
                                </tr>                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_2_rounded</code></td>
                                    <td>Admin 2 theme's Rounded Corners version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_2_angularjs</code></td>
                                    <td>Admin 2 theme's AngularJS version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_2_material_design</code></td>
                                    <td>Admin 2 theme's Material Design version HTML templates</td>
                                </tr>

                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_3</code></td>
                                    <td>Admin 3 theme HTML templates</td>
                                </tr>                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_3_rounded</code></td>
                                    <td>Admin 3 theme's Rounded Corners version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_3_angularjs</code></td>
                                    <td>Admin 3 theme's AngularJS version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_3_material_design</code></td>
                                    <td>Admin 3 theme's Material Design version HTML templates</td>
                                </tr>

                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_4</code></td>
                                    <td>Admin 4 theme HTML templates</td>
                                </tr>                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_4_rounded</code></td>
                                    <td>Admin 4 theme's Rounded Corners version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_4_angularjs</code></td>
                                    <td>Admin 4 theme's AngularJS version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_4_material_design</code></td>
                                    <td>Admin 4 theme's Material Design version HTML templates</td>
                                </tr>

                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_5</code></td>
                                    <td>Admin 5 theme HTML templates</td>
                                </tr>                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_5_rounded</code></td>
                                    <td>Admin 5 theme's Rounded Corners version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_5_material_design</code></td>
                                    <td>Admin 5 theme's Material Design version HTML templates</td>
                                </tr>

                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_6</code></td>
                                    <td>Admin 6 theme HTML templates</td>
                                </tr>                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_6_rounded</code></td>
                                    <td>Admin 6 theme's Rounded Corners version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_6_material_design</code></td>
                                    <td>Admin 6 theme's Material Design version HTML templates</td>
                                </tr>

                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_7</code></td>
                                    <td>Admin 7 theme HTML templates</td>
                                </tr>                                
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_7_rounded</code></td>
                                    <td>Admin 7 theme's Rounded Corners version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 50px"><code><i class="icon icon-minus"></i>admin_7_material_design</code></td>
                                    <td>Admin 7 theme's Material Design version HTML templates</td>
                                </tr>
                                <tr>
                                    <td style="padding-left: 25px"><code><i class="icon icon-minus"></i>theme_rtl</code></td>
                                    <td>Contains of the Metronic's RTL version. The folder structure follows "theme" folder but has some extra css files(*-rtl.css) for RTL support</td>
                                </tr>                             
                            </tbody>
                        </table>               
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="extend">
                        <div class="page-header">
                            <h1>11. Coding & Extending</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <h3>
                            CSS
                        </h3>
                        <p>
                            To overide the theme CSS styles you can use <code>../assets/layouts/layout/css/custom.css</code> for your own customization. This will make the future updates easier if you keep your own CSS code seperate.
                        </p>

                        <h3>Excluding Unused Resources</h3>
                        <ol>

                            <li>Assumes you selected Admin 1(admin_1) sub theme from available 7 sub themes.</li>

                            <li>There are 2 main parts of the theme. First is the assets folder that contains all the css, js and 3rd party plugins and the templates folder where actually HTML templates are placed. So refer to <code>theme/assets</code> and <code>theme/admin_1</code> folders to get started. </li>

                            <li>In <code>theme/assets</code> folder you can see separate folder for layouts(admin 1, admin 2, .... admin 7) and you can keep the assets of the layout you are using(<code>theme/assets/layouts/layout</code>) and also the global assets(<code>theme/layouts/global</code>) and the rest layout assets you can remove since your selected layout does not use them. So under <code>theme/assets/layouts</code> folder you will have <code>theme/assets/layouts/layout</code> and <code>theme/assets/layouts/global</code> folder only.</li>

                            <li>From <code>theme/admin_1</code> refer to the started <code>layout_blank_page.html</code> template. This template includes the minimal required css, js and 3rd party plugins. You can use this template as starting point to your application pages.</li>

                            <li>Try to separate the HTML code of <code>layout_blank_page.html</code> into modular partials(header, sidebar, footer, main content) and keep the partials centralized for each page. </li>

                            <li>Under 3rd party plugins folder(<code>theme/assets/global/plugins</code>) you can exclude unused plugins if you need. By default metronic includes over 80 3rd party plugins and most of theme you may not use so you can exclude the ones you will not use.</li>
                        </ul>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="plugins">
                        <div class="page-header">
                            <h1>12. Javascript Plugins & Resources</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <h3>
                            Select Plugin Or Resource:
                        </h3>
                        <select id="pluginslist" onchange="ShowPlugin();">
                            <option value="sparklines">jQuery Sparklines</option>
                            
                            <option value="jquery_typeahead">Twitter Typeahead</option>
                            <option value="autosize">Autosize</option>

                            <option value="socicon">Socicon Social Icons</option>
                            <option value="bootstrap_tagsinput">Bootstrap Tagsinput</option>
                            <option value="flowchart">Bootstrap Tagsinput</option>

                            <option value="bootstrap_growl">Bootstrap Growl</option>
                            <option value="tabdrop">Bootstrap Tabdrop</option>
                            <option value="minicolors">jQuery Minicolors</option>
                            <option value="selectsplitter">Bootstrap Selectsplitter</option>
                            <option value="bootstrap_confirmation">Bootstrap Confirmation</option>
                            <option value="bootstrap_context"   >Bootstrap Context Menu</option>
                            <option value="amcharts">amCharts</option>
                            <option value="icheck">iCheck</option>
                            <option value="touchspin">Bootstrap TouchSpin</option>
                            <option value="datepaginator">Bootstrap Date Paginator</option>
                            <option value="summer">Bootstrap Summernote</option>
                            <option value="bootstrap_select">Bootstrap Select</option>
                            <option value="bs-dropdown-hover">Bootstrap Hover Dropdown Plugin</option>
                            <option value="session-timeout">Bootstrap Session Timeout</option>
                            <option value="idle-timeout">Bootstrap Idle Timeout</option>
                            <option value="bootbox">Bootstrap Bootbox</option>
                            <option value="taostr">Bootstrap Toastr Notifications</option>
                            <option value="markdown">Bootstrap Markdown</option>
                            <option value="maxlength">Bootstrap Maxlength</option>
                            <option value="switch">Bootstrap Switch</option>
                            <option value="xeditable">Bootstrap X-editable</option>
                            <option value="modal">Bootstrap Extended Modals</option>
                            <option value="wysiwyg5">Bootstrap WYSIWYG5</option>
                            <option value="wizard">Bootstrap Form Wizard</option>
                            <option value="colorpicker">Colorpicker for Bootstrap</option>
                            <option value="datepicker">Datepicker for Bootstrap</option>
                            <option value="daterangepicker">Date Range Picker for Bootstrap</option>
                            <option value="bootstraptimepicker">Bootstrap Timepicker</option>
                            <option value="clockfacetimepicker">Clockface Timepicker</option>
                            <option value="bootpad">jQuery Bootpad for Bootstrap</option>                           

                            <option value="pace">Pace - Page Progress Bar</option>
                            <option value="jquery_notific8">jQuery Notific8</option>
                            <option value="jquery_jstree">jQuery jsTree</option>
                            <option value="nouislider">jQuery noUISlider</option>
                            <option value="jcrop">jQuery jCrop</option>
                            <option value="mask">jQuery Input Mask</option>
                            <option value="multiselect">jQuery Multi Select</option>
                            <option value="easy_pie_chart">jQuery Easy Pie Chart</option>
                            <option value="ip_address">jQuery Input IP Address Control</option>
                            <option value="backstretch">jQuery Backstretch</option>
                            <option value="countdown">jQuery Countdown</option>
                            <option value="datetimepicker">Bootstrap Datetimepicker</option>
                            <option value="uisortable">jQuery UI Sortable</option>
                            <option value="blockui">jQuery BlockUI</option>
                            <option value="cookie">jQuery Cookie</option>
                            <option value="pulsate">jQuery Pulsate</option>
                            <option value="tagsinput">jQuery Tags Input</option>
                            <option value="ckeditor">CKEditor</option>
                            <option value="select2">Select2 Dropdowns</option>
                            <option value="datatables">jQuery DataTables</option>
                            <option value="fileinput">Bootstrap File Input</option>
                            <option value="fileupload">jQuery File Upload</option>
                            <option value="fancybox">FancyBox</option>
                            <option value="flot">jQuery Flot Charts</option>
                            <option value="gmaps">Google Maps - gmaps.js</option>
                            <option value="fullcalendar">FullCalendar</option>
                            <option value="slimscroll">jQuery SlimScroll</option>
                            <option value="jqvmap">JQVMAP</option>
                            <option value="dropzonejs">DropzoneJS</option>
                            <option value="nestable">Nestable</option>
                            <option value="validation">jQuery Validation Plugin</option>
                            <option value="fontawesome">Font Awesome</option>
                            <option value="simplelineicons">Simple Line Icons</option>
                            <option value="opensans">Open Sans</option>
                        </select>
                        <script>
                            function ShowPlugin(){
                              var id = $('#pluginslist').val();
                              $('.pluginwrap').hide();
                              $('#' + id).show();
                              return;
                            }
                        </script>  
                        <div id="sparklines" class="pluginwrap pluginwrapActive">
                            <h3>jQuery Sparklines</h3>
                            <p>
                                This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
  &lt;script src=&quot;../assets/global/plugins/jquery.sparkline.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/index.html" target="_blank">index.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://omnipotent.net/jquery.sparkline" target="_blank">http://omnipotent.net/jquery.sparkline</a>
                        </div>
                        <!--begin: v2.0 -->

                        <div id="socicon" class="pluginwrap">
                            <h3>Socicon</h3>
                            <p>
                                Socicon Social Icons.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/socicon/socicon.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
No JavaScript Available</pre>h
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_socicons.html" target="_blank">ui_socicons.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.socicon.com/" target="_blank">http://www.socicon.com/</a>
                        </div>

                        <div id="bootstrap_tagsinput" class="pluginwrap">
                            <h3>Bootstrap Tagsinput</h3>
                            <p>
                                Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_bootstrap_tagsinput.html" target="_blank">components_bootstrap_tagsinput.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/timschlechter/bootstrap-tagsinput" target="_blank">https://github.com/timschlechter/bootstrap-tagsinput</a>
                        </div>

                        <div id="flowchart" class="pluginwrap">
                            <h3>Flow Chart</h3>
                            <p>
                               Draws simple SVG flow chart diagrams from textual representation of the diagram.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/flowchart/flowchart.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/charts_flowchart.html" target="_blank">charts_flowchart.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://adrai.github.io/flowchart.js/" target="_blank">http://adrai.github.io/flowchart.js/</a>
                        </div>

                        <div id="bootstrap_growl" class="pluginwrap">
                            <h3>Bootstrap Growl</h3>
                            <p>
                                Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-growl/jquery.bootstrap-growl.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_bootstrap_growl.html" target="_blank">ui_bootstrap_growl.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/ifightcrime/bootstrap-growl" target="_blank">https://github.com/ifightcrime/bootstrap-growl</a>
                        </div>

                        <div id="autosize" class="pluginwrap">
                            <h3>Autosize</h3>
                            <p>
                                A small, stand-alone script to automatically adjust textarea height.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/autosize/autosize.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_form_tools.html" target="_blank">components_form_tools.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.jacklmoore.com/autosize" target="_blank">http://www.jacklmoore.com/autosize</a>
                        </div>

                        <div id="tabdrop" class="pluginwrap">
                            <h3>Bootstrap Tabdrop</h3>
                            <p>
                              Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-tabdrop/js/bootstrap-tabdrop.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_tabs_accordions_navs.html" target="_blank">ui_tabs_accordions_navs.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.eyecon.ro/bootstrap-tabdrop/" target="_blank">http://www.eyecon.ro/bootstrap-tabdrop/</a>
                        </div>

                        <div id="selectsplitter" class="pluginwrap">
                            <h3>Bootstrap Select Splitter</h3>
                            <p>
                             Transforms SELECT containing one or more OPTGROUP in two chained SELECT.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-selectsplitter/bootstrap-selectsplitter.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_bootstrap_select_splitter.html" target="_blank">components_bootstrap_select_splitter.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/xavierfaucon/bootstrap-selectsplitter" target="_blank">https://github.com/xavierfaucon/bootstrap-selectsplitter</a>
                        </div>

                        <div id="minicolors" class="pluginwrap">
                            <h3>jQuery MiniColors</h3>
                            <p>
                                A tiny color picker built on jQuery
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/jquery-minicolors/jquery.minicolors.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-minicolors/jquery.minicolors.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_color_pickers.html" target="_blank">components_color_pickers.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/claviska/jquery-minicolors" target="_blank">https://github.com/claviska/jquery-minicolors</a>
                        </div>

                        <div id="bootstrap_context" class="pluginwrap">
                            <h3>Bootstrap Context Menu</h3>
                            <p>
                                Context menu plugin for Twitter's Bootstrap framework
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-contextmenu/bootstrap-contextmenu.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_context_menu.html" target="_blank">components_context_menu.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/sydcanem/bootstrap-contextmenu" target="_blank">https://github.com/sydcanem/bootstrap-contextmenu</a>
                        </div>

                        <div id="bootstrap_confirmation" class="pluginwrap">
                            <h3>Bootstrap Confirmation</h3>
                            <p>
                                Bootstrap plugin for on-place confirm boxes using Popover.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_confirmations.html" target="_blank">ui_confirmations.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://mistic100.github.io/Bootstrap-Confirmation/" target="_blank">http://mistic100.github.io/Bootstrap-Confirmation/</a>
                        </div>

                        <div id="amcharts" class="pluginwrap">
                            <h3>amCharts</h3>
                            <p>
                                 Charting library & maps. Where all data goes visual
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/amcharts/amcharts/amcharts.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/amcharts/amcharts/serial.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/amcharts/amcharts/pie.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/amcharts/amcharts/radar.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/amcharts/amcharts/themes/light.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/amcharts/ammap/ammap.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/amcharts/ammap/maps/js/worldLow.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/amcharts/amstockcharts/amstock.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/charts_amcharts.html" target="_blank">charts_amcharts.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.amcharts.com/" target="_blank">http://www.amcharts.com/</a>
                        </div>

                        <div id="icheck" class="pluginwrap">
                            <h3>iCheck</h3>
                            <p>
                                 SUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/icheck/skins/all.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/icheck/icheck.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/form_icheck.html" target="_blank">form_icheck.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://fronteed.com/iCheck/" target="_blank">http://fronteed.com/iCheck/</a>
                        </div>

                        <div id="pace" class="pluginwrap">
                            <h3>Pace - Page Progress Bar</h3>
                            <p>
                                An automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/pace/themes/pace-theme-flash.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/pace/pace.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_page_progress_style_1.html" target="_blank">ui_page_progress_style_1.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://github.hubspot.com/pace" target="_blank">http://github.hubspot.com/pace</a>
                        </div>

                         <div id="summer" class="pluginwrap">
                            <h3>Bootstrap Summernote</h3>
                            <p>
                                Super Simple WYSIWYG Editor for Bootstrap 3. Summernote is a javascript program that helps you to create WYSIWYG Editor on web.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-summernote/summernote.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-summernote/summernote.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_editors.html" target="_blank">components_editors.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://hackerwins.github.io/summernote/" target="_blank">http://hackerwins.github.io/summernote/</a>
                        </div>

                        <div id="jquery_typeahead" class="pluginwrap">
                            <h3>Twitter Typeahead</h3>
                            <p>
                                A fast and fully-featured autocomplete library.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/typeahead/typeahead.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/typeahead/handlebars.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/typeahead/typeahead.bundle.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_typeahead.html" target="_blank">components_typeahead.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://twitter.github.io/typeahead.js/" target="_blank">http://twitter.github.io/typeahead.js/</a>
                        </div>
                        <div id="bootstrap_select" class="pluginwrap">
                            <h3>Bootstrap Select</h3>
                            <p>
                                A custom select for @twitter Bootstrap using button dropdown.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-select/bootstrap-select.min.css&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-select/bootstrap-select.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_bootstrap_select.html" target="_blank">components_bootstrap_select.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://silviomoreto.github.io/bootstrap-select/3/" target="_blank">http://silviomoreto.github.io/bootstrap-select/3/</a>
                        </div>
                        <div id="jquery_notific8" class="pluginwrap">
                            <h3>jQuery Notific8</h3>
                            <p>
                                jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/jquery-notific8/jquery.notific8.min.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-notific8/jquery.notific8.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_notific8.html" target="_blank">ui_notific8.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://willsteinmetz.net/jquery/notific8" target="_blank">http://willsteinmetz.net/jquery/notific8</a>
                        </div>
                        <div id="jquery_jstree" class="pluginwrap">
                            <h3>jQuery jsTree</h3>
                            <p>
                                A tree view plugin for jQuery
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/jstree/dist/themes/default/style.min.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jstree/dist/jstree.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_tree.html" target="_blank">ui_tree.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.jstree.com/" target="_blank">http://www.jstree.com/</a>
                        </div>
                        <!--end: v2.0 -->
                        <div id="maxlength" class="pluginwrap ">
                            <h3>Bootstrap Maxlength</h3>
                            <p>
                                This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. 
                                This plugin uses the HTML5 attribute "maxlength" to work.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_bootstrap_maxlength.html" target="_blank">components_bootstrap_maxlength.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://mimo84.github.com/bootstrap-maxlength/" target="_blank">http://mimo84.github.com/bootstrap-maxlength/</a>
                        </div>
                        <div id="session-timeout" class="pluginwrap ">
                            <h3>Bootstrap Session Timeout</h3>
                            <p>
                                After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-sessiontimeout/jquery.sessionTimeout.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_session_timeout.html" target="_blank">ui_session_timeout.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/travishorn/jquery-sessionTimeout" target="_blank">https://github.com/travishorn/jquery-sessionTimeout</a>
                        </div>
                        <div id="idle-timeout" class="pluginwrap ">
                            <h3>jQuery Idle Timeout</h3>
                            <p>
                                This script allows you to detect when a user becomes idle (detection provided by Paul Irish's idletimer plugin) and notify the user his/her session
                                is about to expire.  Similar to the technique seen on Mint.com.  Polling requests are automatically sent to the server at a configurable
                                interval, maintaining the users session while s/he is using your application for long periods of time.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-idle-timeout/jquery.idletimeout.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-idle-timeout/jquery.idletimer.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_idle_timeout.html" target="_blank">ui_idle_timeout.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm" target="_blank">http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm</a>
                        </div>
                        <div id="markdown" class="pluginwrap ">
                            <h3>Bootstrap Markdown</h3>
                            <p>
                                Markdown editing for Bootstrap.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css&quot;&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-markdown/js/bootstrap-markdown.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_editors.html" target="_blank">components_editors.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://toopay.github.com/bootstrap-markdown/" target="_blank">http://toopay.github.com/bootstrap-markdown/</a>
                        </div>
                        <!--===============-->
                        <div id="bs-dropdown-hover" class="pluginwrap ">
                            <h3>Bootstrap Hover Dropdown Plugin</h3>
                            <p>
                                A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available
</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/index.html" target="_blank">index.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/CWSpear/bootstrap-hover-dropdown" target="_blank">https://github.com/CWSpear/bootstrap-hover-dropdown</a>
                        </div>
                        
                        <div id="touchspin" class="pluginwrap ">
                            <h3>Bootstrap TouchSpin</h3>
                            <p>
                                A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_bootstrap_touchspin.html" target="_blank">components_bootstrap_touchspin.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">http://www.virtuosoft.eu/code/bootstrap-touchspin/</a>
                        </div>
                        <div id="datepaginator" class="pluginwrap ">
                            <h3>Bootstrap Date Paginator</h3>
                            <p>
                                A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/bootstrap-datepicker/css/datepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/moment.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap-datepaginator/bootstrap-datepaginator.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_datepaginator.html" target="_blank">ui_datepaginator.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.jonathandanielmiles.com/bootstrap-datepaginator/" target="_blank">http://www.jonathandanielmiles.com/bootstrap-datepaginator/</a>
                        </div>
                        <div id="bootbox" class="pluginwrap ">
                            <h3>Bootbox.js</h3>
                            <p>
                                Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, 
                                without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootbox/bootbox.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_bootbox.html" target="_blank">ui_bootbox.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://bootboxjs.com/" target="_blank">http://bootboxjs.com/</a>
                        </div>
                        <div id="nouislider" class="pluginwrap ">
                            <h3>jQuery noUiSlider</h3>
                            <p>
                                noUiSlider is a super tiny jQuery plugin that allows you to create range sliders.  
                                It fully supports touch, and it is way(!) less bloated than the jQueryUI library.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/nouislider/nouislider.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/nouislider/nouislider.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_noui_sliders.html" target="_blank">components_noui_sliders.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://refreshless.com/nouislider/" target="_blank">http://refreshless.com/nouislider/</a>
                        </div>
                        <div id="ionrangesliders" class="pluginwrap ">
                            <h3>jQuery IonRange Slider</h3>
                            <p>
                                Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/ion.rangeslider/nouislider.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/ion.rangeslider/ion.rangeSlider.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_ion_sliders.html" target="_blank">components_ion_sliders.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/</a>
                        </div>
                        <div id="taostr" class="pluginwrap ">
                            <h3>Bootstrap Toastr Notifications</h3>
                            <p>
                                Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/bootstrap-toastr/toastr.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-toastr/toastr.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_toastr.html" target="_blank">ui_toastr.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://codeseven.github.io/toastr/demo.html" target="_blank">http://codeseven.github.io/toastr/demo.html</a>
                        </div>
                        <!--===============-->
                        <div id="mask" class="pluginwrap ">
                            <h3>jQuery Input Mask</h3>
                            <p>
                                jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available
            </pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_form_tools.html" target="_blank">components_form_tools.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://github.com/RobinHerbots/jquery.inputmask" target="_blank">http://github.com/RobinHerbots/jquery.inputmask</a>
                        </div>
                        <div id="multiselect" class="pluginwrap ">
                            <h3>jQuery Multi Select</h3>
                            <p>
                                This plugin is a drop-in replacement for the standard select element with multiple attribute activated.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/jquery-multi-select/css/multi-select.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_multi_select.html" target="_blank">components_multi_select.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://loudev.com/" target="_blank">http://loudev.com/</a>
                        </div>
                        <div id="switch" class="pluginwrap ">
                            <h3>Bootstrap Switch</h3>
                            <p>
                                Use Radio Buttons as switches.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
  &lt;link href=&quot;../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
  &lt;script src=&quot;../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_bootstrap_switch.html" target="_blank">components_bootstrap_switch.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.larentis.eu/switch/" target="_blank">http://www.larentis.eu/switch/</a>
                        </div>
                        <div id="jcrop" class="pluginwrap ">
                            <h3>jQuery jCrop</h3>
                            <p>
                                Jcrop is the quick and easy way to add image cropping functionality to
                                your web application. It combines the ease-of-use of a typical jQuery
                                plugin with a powerful cross-platform DHTML cropping engine that is
                                faithful to familiar desktop graphics applications.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
  &lt;link href=&quot;../assets/global/plugins/jcrop/css/jquery.Jcrop.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
  &lt;script src=&quot;../assets/global/plugins/jcrop/js/jquery.color.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../assets/global/plugins/jcrop/js/jquery.Jcrop.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/form_image_crop.html" target="_blank">form_image_crop.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://github.com/tapmodo/Jcrop" target="_blank">http://github.com/tapmodo/Jcrop</a>
                        </div>
                        <div id="xeditable" class="pluginwrap ">
                            <h3>Bootstrap X-editable</h3>
                            <p>
                                In-place editing with Twitter Bootstrap.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
  &lt;!-- BEGIN PLUGINS USED BY X-EDITABLE --&gt;
  &lt;link href=&quot;../assets/global/plugins/select2/select2.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;../assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;../assets/global/plugins/bootstrap-datepicker/css/datepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;../assets/global/plugins/bootstrap-timepicker/compiled/timepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;../assets/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;!-- END PLUGINS USED BY X-EDITABLE --&gt;
  &lt;!-- BEGIN X-EDITABLE PLUGIN--&gt;
  &lt;link href=&quot;../assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;../assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;!-- END X-EDITABLE PLUGIN--&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
  &lt;!-- BEGIN PLUGINS USED BY X-EDITABLE --&gt;
  &lt;script src=&quot;../assets/global/plugins/select2/select2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../assets/global/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;!-- END PLUGINS USED BY X-EDITABLE --&gt;
  &lt;!-- BEGIN X-EDITABLE PLUGIN--&gt;
  &lt;script src=&quot;../assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../assets/global/plugins/bootstrap-editable/inputs-ext/address/address.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../assets/global/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;!-- END X-EDITABLE PLUGIN--&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/form_editable.html" target="_blank">form_editable.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://vitalets.github.io/x-editable/demo.html" target="_blank">http://vitalets.github.io/x-editable/demo.html</a>
                        </div>
                        <div id="modal" class="pluginwrap ">
                            <h3>Bootstrap Extended Modals</h3>
                            <p>
                                Responsive, Stackable, AJAX and more.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
            </pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_extended_modals.html" target="_blank">ui_extended_modals.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://jschr.github.com/bootstrap-modal/" target="_blank">http://jschr.github.com/bootstrap-modal/</a>
                        </div>
                        <div id="easy_pie_chart" class="pluginwrap ">
                            <h3>jQuery Easy Pie Chart</h3>
                            <p>
                                Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available
            </pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-easypiechart/jquery.easypiechart.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/index.html" target="_blank">index.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a>
                        </div>
                        <div id="sparklines" class="pluginwrap ">
                            <h3>jQuery Sparklines</h3>
                            <p>
                                This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available
              </pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
  &lt;script src=&quot;../assets/global/plugins/jquery.sparkline.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/index.html" target="_blank">index.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://omnipotent.net/jquery.sparkline" target="_blank">http://omnipotent.net/jquery.sparkline</a>
                        </div>
                        <div id="bootpad" class="pluginwrap ">
                            <h3>jQuery Bootpad for Bootstrap</h3>
                            <p>
                                Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available
              </pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/jquery.bootpag.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_general.html" target="_blank">ui_general.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://botmonster.com/jquery-bootpag/" target="_blank">http://botmonster.com/jquery-bootpag/</a>
                        </div>
                        <div id="ip_address" class="pluginwrap ">
                            <h3>jQuery Input IP Address Control</h3>
                            <p>
                                During user input field, this plugin controls the format of IPv4 or IPv6 addresses.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available
            </pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/jquery.input-ip-address-control-1.0.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_form_tools.html" target="_blank">components_form_tools.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://code.google.com/p/jquery-input-ip-address-control" target="_blank">https://code.google.com/p/jquery-input-ip-address-control</a>
                        </div>
                        <div id="backstretch" class="pluginwrap">
                            <h3>jQuery Backstretch</h3>
                            <p>
                                A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/backstretch/jquery.backstretch.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/page_system_coming_soon.html" target="_blank">page_system_coming_soon.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://srobbin.com/jquery-plugins/backstretch/" target="_blank">http://srobbin.com/jquery-plugins/backstretch/</a>
                        </div>
                        <div id="countdown" class="pluginwrap">
                            <h3>jQuery Countdown</h3>
                            <p>
                                A jQuery plugin that sets a div or span to show a countdown to a given time.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/countdown/jquery.countdown.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/page_system_coming_soon.html" target="_blank">page_system_coming_soon.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://keith-wood.name/countdown.html" target="_blank">http://keith-wood.name/countdown.html</a>
                        </div>
                        <div id="datetimepicker" class="pluginwrap">
                            <h3>Bootstrap Datetimepicker</h3>
                            <p>
                                This project is a fork of bootstrap-datetimepicker project which doesn't include Time part.
                                Some others parts has been improved as for example the load process which now accepts the ISO-8601 format.
                                I've copy/pasted the forked project's documentation and added my specifications.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_date_time_pickers.html" target="_blank">components_date_time_pickers.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.malot.fr/bootstrap-datetimepicker/" target="_blank">http://www.malot.fr/bootstrap-datetimepicker/</a>
                        </div>
                        <div id="select2" class="pluginwrap ">
                            <h3>Select2</h3>
                            <p>
                                Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/select2/select2.min.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/select2/select2.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_select2.html" target="_blank">components_select2.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://ivaynberg.github.io/select2" target="_blank">ivaynberg.github.io/select2/</a>
                        </div>
                        <div id="uisortable" class="pluginwrap">
                            <h3>jQuery UI Sortable</h3>
                            <p>
                                Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share <code>draggable</code> properties.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css&quot; rel=&quot;stylesheet&quot;/&gt; </pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js&quot;&gt;&lt;/script&gt;         </pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/portlet_draggable.html" target="_blank">portlet_draggable.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://jqueryui.com/sortable/" target="_blank">www.jqueryui.com/sortable/</a>
                        </div>
                        <div id="blockui" class="pluginwrap">
                            <h3>jQuery BlockUI</h3>
                            <p>
                                The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/js/jquery.blockui.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_blockui.html" target="_blank">ui_blockui.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://jquery.malsup.com/block/" target="_blank">www.jquery.malsup.com/block/</a>
                        </div>
                        <div id="cookie" class="pluginwrap">
                            <h3>jQuery Cookie</h3>
                            <p>
                                A simple, lightweight jQuery plugin for reading, writing and deleting cookies.            
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/js/jquery.cookie.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/index.html" target="_blank">index.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/carhartl/jquery-cookie" target="_blank">www.github.com/carhartl/jquery-cookie</a>
                        </div>
                        <div id="pulsate" class="pluginwrap">
                            <h3>jQuery Pulsate</h3>
                            <p>
                                jQuery Pulsate provides animated pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way.            
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/js/jquery.pulsate.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_general.html" target="_blank">ui_general.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://kilianvalkhof.com/jquerypulsate/" target="_blank">www.kilianvalkhof.com/jquerypulsate/</a>
                        </div>
                        
                        <div id="colorpicker" class="pluginwrap">
                            <h3>Colorpicker for Bootstrap</h3>
                            <p>
                                Add color picker to field or to any other element
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-colorpicker/css/colorpicker.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js&quot;&gt;&lt;/script&gt;  </pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_color_pickers.html" target="_blank">components_color_pickers.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.eyecon.ro/bootstrap-colorpicker/" target="_blank">www.eyecon.ro/bootstrap-colorpicker/</a>
                        </div>
                        <div id="datepicker" class="pluginwrap">
                            <h3>Enhanced Datepicker for Bootstrap</h3>
                            <p>
                                Add datepicker picker to field or to any other element
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-datepicker/css/datepicker.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_date_time_pickers.html" target="_blank">components_date_time_pickers.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/eternicode/bootstrap-datepicker" target="_blank">https://github.com/eternicode/bootstrap-datepicker</a>
                        </div>
                        <div id="daterangepicker" class="pluginwrap">
                            <h3>Date Range Picker for Bootstrap</h3>
                            <p>
                                This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-daterangepicker/moment.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_date_time_pickers.html" target="_blank">components_date_time_pickers.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank">www.github.com/dangrossman/bootstrap-daterangepicker</a>
                        </div>
                        <div id="bootstraptimepicker" class="pluginwrap">
                            <h3>Bootstrap Timepicker</h3>
                            <p>
                                Easily select a time for a text input using your mouse or keyboards arrow keys.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-timepicker/compiled/timepicker.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_date_time_pickers.html" target="_blank">components_date_time_pickers.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://jdewit.github.com/bootstrap-timepicker/" target="_blank">www.jdewit.github.com/bootstrap-timepicker/</a>
                        </div>
                        <div id="clockfacetimepicker" class="pluginwrap">
                            <h3>Clockface Timepicker</h3>
                            <p>
                                Clockface is a simple timepicker for Twitter Bootstrap
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/clockface/css/clockface.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/clockface/js/clockface.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_date_time_pickers.html" target="_blank">components_date_time_pickers.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://vitalets.github.com/clockface/" target="_blank">www.vitalets.github.com/clockface/</a>
                        </div>
                        <div id="wysiwyg5" class="pluginwrap">
                            <h3>Bootstrap WYSIWYG5</h3>
                            <p>
                                Simple WYSIWYG Editor for Bootstrap
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_editors.html" target="_blank">components_editors.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://jhollingworth.github.com/bootstrap-wysihtml5/" target="_blank">http://jhollingworth.github.com/bootstrap-wysihtml5/</a>
                        </div>
                        <div id="ckeditor" class="pluginwrap">
                            <h3>CKEditor</h3>
                            <p>
                                CKEditor is a ready-for-use HTML text editor designed to simplify web content creation
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/ckeditor/ckeditor.js&quot;&gt;&lt;/script&gt;  </pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_form_tools.html" target="_blank">components_form_tools.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://ckeditor.com/" target="_blank">http://ckeditor.com/</a>
                        </div>
                        <div id="datatables" class="pluginwrap">
                            <h3>DataTables</h3>
                            <p>
                                DataTables for Twitter Bootstrap
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/global/plugins/datatables/plugins/datatables/datatables.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.min.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/scripts/datatable.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/datatables/datatables.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/table_datatables_managed.html" target="_blank">table_datatables_managed.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.datatables.net/" target="_blank">http://www.datatables.net/</a>
                        </div>
                        <div id="fileinput" class="pluginwrap">
                            <h3>Bootstrap File Unput</h3>
                            <p>
                                The file input plugin allows you to create a visually appealing file or image input widgets.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS Available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/components_bootstrap_fileinput.html" target="_blank">components_bootstrap_fileinput.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://jasny.github.io/bootstrap/javascript/#fileinput" target="_blank">http://jasny.github.io/bootstrap/javascript/#fileinput</a>
                        </div>
                        <div id="fileupload" class="pluginwrap">
                            <h3>jQuery Fileupload</h3>
                            <p>
                                File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">&lt;!-- BEGIN PAGE LEVEL STYLES --&gt;
&lt;link href=&quot;../assets/global/plugins/jquery-file-upload/blueimp-gallery/blueimp-gallery.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/jquery-file-upload/css/jquery.fileupload.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;../assets/global/plugins/jquery-file-upload/css/jquery.fileupload-ui.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;!-- END PAGE LEVEL STYLES --&gt;
</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">&lt;!-- BEGIN:File Upload Plugin JS files--&gt;
&lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Templates plugin is included to render the upload/download listings --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/vendor/tmpl.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Load Image plugin is included for the preview images and image resizing functionality --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/vendor/load-image.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Canvas to Blob plugin is included for image resizing functionality --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- blueimp Gallery script --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/blueimp-gallery/jquery.blueimp-gallery.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.iframe-transport.js&quot;&gt;&lt;/script&gt;
&lt;!-- The basic File Upload plugin --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.fileupload.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload processing plugin --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.fileupload-process.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload image preview &amp; resize plugin --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.fileupload-image.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload audio preview plugin --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.fileupload-audio.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload video preview plugin --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.fileupload-video.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload validation plugin --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.fileupload-validate.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload user interface plugin --&gt;
&lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/jquery.fileupload-ui.js&quot;&gt;&lt;/script&gt;
&lt;!-- The main application script --&gt;
&lt;!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 --&gt;
&lt;!--[if (gte IE 8)&amp;(lt IE 10)]&gt;
    &lt;script src=&quot;../assets/global/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
&lt;!-- END:File Upload Plugin JS files--&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/form_fileupload.html" target="_blank">form_fileupload.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://blueimp.github.io/jQuery-File-Upload/" target="_blank">http://blueimp.github.io/jQuery-File-Upload/</a>
                        </div>
                        <div id="flot" class="pluginwrap">
                            <h3>Flot</h3>
                            <p>
                                Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/flot/jquery.flot.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/flot/jquery.flot.resize.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;          
            </pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/charts_flot.html" target="_blank">charts_flot.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a>
                        </div>
                        <div id="gmaps" class="pluginwrap">
                            <h3>gmaps.js</h3>
                            <p>
                                gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/js/gmaps.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../assets/global/plugins/js/demo.gmaps.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/maps_google.html" target="_blank">maps_google.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://hpneo.github.com/gmaps/" target="_blank">http://hpneo.github.com/gmaps/</a>
                        </div>
                        <div id="fullcalendar" class="pluginwrap">
                            <h3>FullCalendar</h3>
                            <p>
                                FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/fullcalendar/fullcalendar/bootstrap-fullcalendar.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.min.js&quot;&gt;&lt;/script&gt;  </pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/app_calendar.html" target="_blank">app_calendar.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://arshaw.com/fullcalendar/" target="_blank">http://arshaw.com/fullcalendar/</a>
                        </div>
                        <div id="slimscroll" class="pluginwrap">
                            <h3>jQuery slimScroll</h3>
                            <p>
                                slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/index.html" target="_blank">index.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://rocha.la/jQuery-slimScroll" target="_blank">http://rocha.la/jQuery-slimScroll</a>
                        </div>
                        <div id="jqvmap" class="pluginwrap">
                            <h3>JQVMAP</h3>
                            <p>
                                JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/jqvmap/jqvmap/jqvmap.css&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
&lt;script src=&quot;../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/maps_vector.html" target="_blank">maps_vector.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://jqvmap.com/" target="_blank">http://jqvmap.com/</a>
                        </div>
                        
                        <div id="dropzonejs" class="pluginwrap">
                            <h3>DropzoneJS</h3>
                            <p>
                                DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/dropzone/css/dropzone.css&quot; rel=&quot;stylesheet&quot;/&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/dropzone/dropzone.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/form_dropzone.html" target="_blank">form_dropzone.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://www.dropzonejs.com/" target="_blank">http://www.dropzonejs.com/</a>
                        </div>
                        <div id="wizard" class="pluginwrap">
                            <h3>Bootstrap Form Wizard</h3>
                            <p>
                                This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/form_wizard.html" target="_blank">form_wizard.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/VinceG/twitter-bootstrap-wizard" target="_blank">https://github.com/VinceG/twitter-bootstrap-wizard</a>
                        </div>
                        <div id="nestable" class="pluginwrap">
                            <h3>Nestable</h3>
                            <p>
                                Drag & drop hierarchical list with mouse and touch compatibility.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; tyyope=&quot;text/css&quot; href=&quot;../assets/global/plugins/jquery-nestable/jquery.nestable.css&quot; /&gt;</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script src=&quot;../assets/global/plugins/jquery-nestable/jquery.nestable.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_nestable.html" target="_blank">ui_nestable.html</a>
                            <h4>Official Documentation</h4>
                            <a href="https://github.com/yhnavein/Nestable" target="_blank">https://github.com/yhnavein/Nestable</a>
                        </div>
                        <div id="validation" class="pluginwrap">
                            <h3>jQuery Validation Plugin</h3>
                            <p>
                                The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
No CSS available</pre>
                            <h4>JavaScript Files</h4>
                            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/global/plugins/jquery-validation/dist/jquery.validate.min.js&quot;&gt;&lt;/script&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/form_validation.html" target="_blank">form_validation.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a>
                        </div>
                        <div id="fontawesome" class="pluginwrap">
                            <h3>Font Awesome</h3>
                            <p>
                                The iconic font designed for use with Twitter Bootstrap
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/font-awesome/css/font-awesome.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_icons.html" target="_blank">ui_icons.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">http://fortawesome.github.com/Font-Awesome/</a>
                        </div>
                         <div id="simplelineicons" class="pluginwrap">
                            <h3>Simple Line Icons</h3>
                            <p>
                                Simple Line Icons is 162 simple stroke icons that are great for mobile applications, 
websites, user interfaces, etc. All icons were converted from the same beautiful 
simple line icon sets released previously on GraphicBurger.
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;../assets/global/plugins/simple-line-icons/simple-line-icons.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
                            <h4>Demo Page</h4>
                            <a href="../theme/admin_1/ui_icons.html" target="_blank">ui_icons.html</a>
                            <h4>Official Documentation</h4>
                            <a href="http://graphicburger.com/simple-line-icons-webfont/" target="_blank">http://graphicburger.com/simple-line-icons-webfont/</a>
                        </div>
                        <div id="opensans" class="pluginwrap">
                            <h3>Open Sans</h3>
                            <p>
                                Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all
                            </p>
                            <h4>CSS Files</h4>
                            <pre class="prettyprint linenums">
&lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>
                            <h4>Official Documentation</h4>
                            <a href="http://www.google.com/webfonts" target="_blank">http://www.google.com/webfonts</a>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="references">
                        <div class="page-header">
                            <h1>13. References</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            Below is the list of all plugins and external resources used to power this template.
                        </p>
                        <table class="table table-bordered table-striped" width="600">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>URL</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td width="300">jQuery</td>
                                    <td>Core Javascript library</td>
                                    <td><a href="http://www.jquery.com" target="_blank">http://www.jquery.com</a></td>
                                </tr>
                                <tr>
                                    <td>Twitter Bootstrap</td>
                                    <td>Sleek, intuitive, and powerful front-end framework for faster and easier web development</td>
                                    <td><a href="http://getbootstrap.com" target="_blank">http://getbootstrap.com</a></td>
                                </tr>
                                <tr>
                                    <td>Select2</td>
                                    <td>Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results</td>
                                    <td><a href="http://ivaynberg.github.io/select2/" target="_blank">http://ivaynberg.github.io/select2/</a></td>
                                </tr>
        
                                <tr>
                                    <td>Bootstrap Confirmation</td>
                                    <td>Socicon Social Icons.</td>
                                    <td><a href="http://mistic100.github.io/Bootstrap-Confirmation/" target="_blank">http://mistic100.github.io/Bootstrap-Confirmation/</a></td>
                                </tr>

                                 <tr>
                                    <td>Socicon</td>
                                    <td>Bootstrap plugin for on-place confirm boxes using Popover.</td>
                                    <td><a href="http://www.socicon.com/" target="_blank">http://www.socicon.com/</a></td>
                                </tr>

                                 <tr>
                                    <td>Bootstrap Tagsinput</td>
                                    <td> Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.</td>
                                    <td><a href="https://github.com/timschlechter/bootstrap-tagsinput" target="_blank">https://github.com/timschlechter/bootstrap-tagsinput</a></td>
                                </tr>

                                 <tr>
                                    <td>Flow Chart</td>
                                    <td>Bootstrap plugin for on-place confirm boxes using Popover.</td>
                                    <td><a href="http://adrai.github.io/flowchart.js/" target="_blank">http://adrai.github.io/flowchart.js/</a></td>
                                </tr>
                                <tr>
                                    <td>Autosize</td>
                                    <td> A small, stand-alone script to automatically adjust textarea height.</td>
                                    <td><a href="http://www.jacklmoore.com/autosize" target="_blank">http://www.jacklmoore.com/autosize</a></td>
                                </tr>

                                <tr>
                                    <td>Bootstrap Summernote</td>
                                    <td>Super Simple WYSIWYG Editor for Bootstrap 3. Summernote is a javascript program that helps you to create WYSIWYG Editor on web.</td>
                                    <td><a href="http://hackerwins.github.io/summernote/" target="_blank">http://hackerwins.github.io/summernote/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Hover Dropdown Plugin </td>
                                    <td>A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.</td>
                                    <td><a href="https://github.com/CWSpear/bootstrap-hover-dropdown" target="_blank">https://github.com/CWSpear/bootstrap-hover-dropdown</a></td>
                                </tr>
                                <tr>
                                    <td>Twitter Typeahead</td>
                                    <td>A fast and fully-featured autocomplete library.</td>
                                    <td><a href="http://twitter.github.io/typeahead.js/" target="_blank">http://twitter.github.io/typeahead.js/</a></td>
                                </tr>
                                <tr>
                                    <td>amCharts</td>
                                    <td>Charting library & maps. Where all data goes visual.</td>
                                    <td><a href="http://www.amcharts.com/" target="_blank">http://www.amcharts.com/</a></td>
                                </tr>
                                <tr>
                                    <td>iCheck</td>
                                    <td>SUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO.</td>
                                    <td><a href="http://fronteed.com/iCheck/" target="_blank">http://fronteed.com/iCheck/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Select</td>
                                    <td> A custom select for @twitter Bootstrap using button dropdown.</td>
                                    <td><a href="http://silviomoreto.github.io/bootstrap-select/3/" target="_blank">http://silviomoreto.github.io/bootstrap-select/3/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Notific8</td>
                                    <td>jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8.</td>
                                    <td><a href="http://willsteinmetz.net/jquery/notific8" target="_blank">http://willsteinmetz.net/jquery/notific8</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery jsTree</td>
                                    <td> A tree view plugin for jQuery.</td>
                                    <td><a href="http://www.jstree.com/" target="_blank">http://www.jstree.com/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Maxlength</td>
                                    <td> This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. 
                                        This plugin uses the HTML5 attribute "maxlength" to work.
                                    </td>
                                    <td><a href="http://mimo84.github.com/bootstrap-maxlength/" target="_blank">http://mimo84.github.com/bootstrap-maxlength/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Session Timeout</td>
                                    <td>After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL.</td>
                                    <td><a href="https://github.com/travishorn/jquery-sessionTimeout" target="_blank">https://github.com/travishorn/jquery-sessionTimeout</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Idle Timeout</td>
                                    <td>This script allows you to detect when a user becomes idle (detection provided by Paul Irish's idletimer plugin) and notify the user his/her session
                                        is about to expire.  Similar to the technique seen on Mint.com.  Polling requests are automatically sent to the server at a configurable
                                        interval, maintaining the users session while s/he is using your application for long periods of time.
                                    </td>
                                    <td><a href="http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm" target="_blank">http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap TouchSpin</td>
                                    <td>A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.</td>
                                    <td><a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">http://www.virtuosoft.eu/code/bootstrap-touchspin/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Date Paginator</td>
                                    <td>A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. 
                                        In the process creating a hugely simplified and modularised way of paging date based results in your application.
                                    </td>
                                    <td><a href="http://www.jonathandanielmiles.com/bootstrap-datepaginator/" target="_blank">http://www.jonathandanielmiles.com/bootstrap-datepaginator/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootbox.js</td>
                                    <td>Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, 
                                        without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
                                    </td>
                                    <td><a href="http://bootboxjs.com/" target="_blank">http://bootboxjs.com/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Markdown</td>
                                    <td>Markdown editing for Bootstrap.</td>
                                    <td><a href="http://toopay.github.com/bootstrap-markdown/" target="_blank">http://toopay.github.com/bootstrap-markdown/</a></td>
                                </tr>
                               
                                <tr>
                                    <td>Bootstrap FuelUX Input Spinner</td>
                                    <td>Bootstrap FuelUX Input Spinner For App.</td>
                                    <td><a href="http://exacttarget.github.io/fuelux/#spinner" target="_blank">http://exacttarget.github.io/fuelux/#spinner</a></td>
                                </tr>


                                <tr>
                                    <td>Bootstrap Context Menu</td>
                                    <td>Context menu plugin for Twitter's Bootstrap framework
                                    </td>
                                    <td><a href="https://github.com/sydcanem/bootstrap-contextmenu" target="_blank">https://github.com/sydcanem/bootstrap-contextmenu</a></td>
                                </tr>


                                <tr>
                                    <td>jQuery noUiSlider</td>
                                    <td>noUiSlider is a super tiny jQuery plugin that allows you to create range sliders.  
                                        It fully supports touch, and it is way(!) less bloated than the jQueryUI library.
                                    </td>
                                    <td><a href="http://refreshless.com/nouislider/" target="_blank">http://refreshless.com/nouislider/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery IonRange Slider</td>
                                    <td> Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS.</td>
                                    <td><a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Toastr Notifications</td>
                                    <td> Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.</td>
                                    <td><a href="http://codeseven.github.io/toastr/demo.html" target="_blank">http://codeseven.github.io/toastr/demo.html</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Switch</td>
                                    <td>Use Radio Buttons as switches.</td>
                                    <td><a href="http://www.larentis.eu/switch/" target="_blank">http://www.larentis.eu/switch/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery jCrop</td>
                                    <td>Jcrop is the quick and easy way to add image cropping functionality to
                                        your web application. It combines the ease-of-use of a typical jQuery
                                        plugin with a powerful cross-platform DHTML cropping engine that is
                                        faithful to familiar desktop graphics applications.
                                    </td>
                                    <td><a href="http://github.com/tapmodo/Jcrop" target="_blank">http://github.com/tapmodo/Jcrop</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap X-editable</td>
                                    <td> In-place editing with Twitter Bootstrap.</td>
                                    <td><a href="http://vitalets.github.io/x-editable/demo.html" target="_blank">http://vitalets.github.io/x-editable/demo.html</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Extended Modals</td>
                                    <td>Responsive, Stackable, AJAX and more.</td>
                                    <td><a href="http://jschr.github.com/bootstrap-modal/" target="_blank">http://jschr.github.com/bootstrap-modal/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Multi Select</td>
                                    <td> This plugin is a drop-in replacement for the standard select element with multiple attribute activated.</td>
                                    <td><a href="http://loudev.com/" target="_blank">http://loudev.com/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Sparklines</td>
                                    <td>This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.</td>
                                    <td><a href="http://omnipotent.net/jquery.sparkline" target="_blank">http://omnipotent.net/jquery.sparkline</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Input Mask</td>
                                    <td>jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers.</td>
                                    <td><a href="http://github.com/RobinHerbots/jquery.inputmask" target="_blank">http://github.com/RobinHerbots/jquery.inputmask</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Easy Pie Chart</td>
                                    <td>Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element</td>
                                    <td><a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Input IP Address Control</td>
                                    <td>During user input field, this plugin controls the format of IPv4 or IPv6 addresses.</td>
                                    <td><a href="https://code.google.com/p/jquery-input-ip-address-control" target="_blank">https://code.google.com/p/jquery-input-ip-address-control</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery UI Sortable</td>
                                    <td>jQuery UI Sortable</td>
                                    <td><a href="http://jqueryui.com/sortable/" target="_blank">http://jqueryui.com/sortable/</a></td>
                                </tr>
                                <tr>
                                    <td>Pace - Page Progress Bar</td>
                                    <td>n automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation.</td>
                                    <td><a href="http://github.hubspot.com/pace" target="_blank">http://github.hubspot.com/pace</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery BlockUI</td>
                                    <td>The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser</td>
                                    <td><a href="http://jquery.malsup.com/block/" target="_blank">http://jquery.malsup.com/block/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Cookie</td>
                                    <td>A simple, lightweight jQuery plugin for reading, writing and deleting cookies.</td>
                                    <td><a href="https://github.com/carhartl/jquery-cookie" target="_blank">https://github.com/carhartl/jquery-cookie</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Pulsate</td>
                                    <td>jQuery Pulsate provides animated pulsating effect that's useful for focussing attention to a certain part 
                                        of your webpage in a subtle way.
                                    </td>
                                    <td><a href="http://kilianvalkhof.com/jquerypulsate/" target="_blank">http://kilianvalkhof.com/jquerypulsate/</a></td>
                                </tr>
                                <tr>
                                    <td>Respond</td>
                                    <td>A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more)</td>
                                    <td><a href="https://github.com/scottjehl/Respond" target="_blank">https://github.com/scottjehl/Respond</a></td>
                                </tr>
                                <tr>
                                    <td>Excanvas</td>
                                    <td>Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages</td>
                                    <td><a href="http://excanvas.sourceforge.net/" target="_blank">http://excanvas.sourceforge.net/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Backstretch</td>
                                    <td>A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.</td>
                                    <td><a href="http://srobbin.com/jquery-plugins/backstretch/" target="_blank">http://srobbin.com/jquery-plugins/backstretch/</a></td>
                                </tr> 
                                <tr>
                                    <td>jQuery Countdown</td>
                                    <td>A jQuery plugin that sets a div or span to show a countdown to a given time.</td>
                                    <td><a href="http://keith-wood.name/countdown.html" target="_blank">http://keith-wood.name/countdown.html</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Bootpad for Bootstrap</td>
                                    <td>Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone.</td>
                                    <td><a href="http://botmonster.com/jquery-bootpag/" target="_blank">http://botmonster.com/jquery-bootpag/</a></td>
                                </tr>
                                <tr>
                                    <td>Colorpicker for Bootstrap</td>
                                    <td>Add color picker to field or to any other element</td>
                                    <td><a href="http://www.eyecon.ro/bootstrap-colorpicker/" target="_blank">http://www.eyecon.ro/bootstrap-colorpicker/</a></td>
                                </tr>
                                <tr>
                                    <td>Datepicker for Bootstrap</td>
                                    <td>Add datepicker picker to field or to any other element</td>
                                    <td><a href="https://github.com/eternicode/bootstrap-datepicker" target="_blank">https://github.com/eternicode/bootstrap-datepicker</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Datetimepicker</td>
                                    <td>This project is a fork of bootstrap-datetimepicker project which doesn't include Time part.
                                        Some others parts has been improved as for example the load process which now accepts the ISO-8601 format.
                                    </td>
                                    <td><a href="http://www.malot.fr/bootstrap-datetimepicker/" target="_blank">http://www.malot.fr/bootstrap-datetimepicker/</a></td>
                                </tr>
                                <tr>
                                    <td>Date Range Picker for Bootstrap</td>
                                    <td>This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates
                                    </td>
                                    <td><a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank">https://github.com/dangrossman/bootstrap-daterangepicker</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Timepicker</td>
                                    <td>Easily select a time for a text input using your mouse or keyboards arrow keys.</td>
                                    <td><a href="http://jdewit.github.com/bootstrap-timepicker/" target="_blank">http://jdewit.github.com/bootstrap-timepicker/</a></td>
                                </tr>
                                <tr>
                                    <td>Clockface Timepicker</td>
                                    <td>Clockface is a simple timepicker for Twitter Bootstrap</td>
                                    <td><a href="http://vitalets.github.com/clockface/" target="_blank">http://vitalets.github.com/clockface/</a></td>
                                </tr>

                                <tr>
                                    <td>Bootstrap Growl</td>
                                    <td>Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.</td>
                                    <td><a href="https://github.com/ifightcrime/bootstrap-growl" target="_blank">https://github.com/ifightcrime/bootstrap-growl</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Tabdrop</td>
                                    <td>Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.</td>
                                    <td><a href="http://www.eyecon.ro/bootstrap-tabdrop/" target="_blank">http://www.eyecon.ro/bootstrap-tabdrop/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Select Splitter</td>
                                    <td>Transforms SELECT containing one or more OPTGROUP in two chained SELECT.</td>
                                    <td><a href="https://github.com/xavierfaucon/bootstrap-selectsplitter" target="_blank">https://github.com/xavierfaucon/bootstrap-selectsplitter</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery MiniColors</td>
                                    <td> A tiny color picker built on jQuery</td>
                                    <td><a href="https://github.com/claviska/jquery-minicolors" target="_blank">https://github.com/claviska/jquery-minicolors</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Tags Input</td>
                                    <td>Magically convert a simple text input into a cool tag list with this jQuery plugin</td>
                                    <td><a href="https://github.com/xoxco/jQuery-Tags-Input" target="_blank">https://github.com/xoxco/jQuery-Tags-Input</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap WYSIWYG5</td>
                                    <td>Simple WYSIWYG Editor for Bootstrap</td>
                                    <td><a href="http://jhollingworth.github.com/bootstrap-wysihtml5/" target="_blank">http://jhollingworth.github.com/bootstrap-wysihtml5/</a></td>
                                </tr>
                                <tr>
                                    <td>CKEditor</td>
                                    <td>CKEditor is a ready-for-use HTML text editor designed to simplify web content creation</td>
                                    <td><a href="http://ckeditor.com/" target="_blank">http://ckeditor.com/</a></td>
                                </tr>
                                <tr>
                                    <td>DataTables</td>
                                    <td>DataTables for Twitter Bootstrap</td>
                                    <td><a href="http://www.datatables.net/" target="_blank">http://www.datatables.net/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap File Input</td>
                                    <td>The file upload plugin allows you to create a visually appealing file or image upload widgets</td>
                                    <td><a href="http://jasny.github.io/bootstrap/javascript/#fileinput" target="_blank">http://jasny.github.io/bootstrap/javascript/#fileinput</a></td>
                                </tr>
                                <tr>
                                    <td>FancyBox</td>
                                    <td>FancyBox is a tool for displaying images, html content and multi-media</td>
                                    <td><a href="http://fancybox.net/" target="_blank">http://fancybox.net/</a></td>
                                </tr>
                                <tr>
                                    <td>Flot</td>
                                    <td>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.</td>
                                    <td><a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></td>
                                </tr>
                                <tr>
                                    <td>gmaps.js</td>
                                    <td>gmaps.js allows you to use the potential of Google Maps in a simple way.
                                        No more extensive documentation or large amount of code
                                    </td>
                                    <td><a href="http://hpneo.github.com/gmaps/" target="_blank">http://hpneo.github.com/gmaps/</a></td>
                                </tr>
                                <tr>
                                    <td>FullCalendar</td>
                                    <td>FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar</td>
                                    <td><a href="http://arshaw.com/fullcalendar/" target="_blank">http://arshaw.com/fullcalendar/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery slimScroll</td>
                                    <td>slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar </td>
                                    <td><a href="http://rocha.la/jQuery-slimScroll" target="_blank">http://rocha.la/jQuery-slimScroll</a></td>
                                </tr>
                                <tr>
                                    <td>JQVMAP</td>
                                    <td>JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.</td>
                                    <td><a href="http://jqvmap.com/" target="_blank">http://jqvmap.com/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery File Upload</td>
                                    <td>File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery</td>
                                    <td><a href="http://blueimp.github.com/jQuery-File-Upload/" target="_blank">http://blueimp.github.com/jQuery-File-Upload/</a></td>
                                </tr>
                                <tr>
                                    <td>DropzoneJS</td>
                                    <td>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.</td>
                                    <td><a href="http://www.dropzonejs.com/" target="_blank">http://www.dropzonejs.com/</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery UI Touch Punch</td>
                                    <td>jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.</td>
                                    <td><a href="http://touchpunch.furf.com/" target="_blank">http://touchpunch.furf.com/</a></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap Form Wizard</td>
                                    <td>This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.</td>
                                    <td><a href="https://github.com/VinceG/twitter-bootstrap-wizard" target="_blank">https://github.com/VinceG/twitter-bootstrap-wizard</a></td>
                                </tr>
                                <tr>
                                    <td>Nestable</td>
                                    <td>Drag & drop hierarchical list with mouse and touch compatibility.</td>
                                    <td><a href="https://github.com/dbushell/Nestable" target="_blank">https://github.com/dbushell/Nestable</a></td>
                                </tr>
                                <tr>
                                    <td>jQuery Validation Plugin</td>
                                    <td>The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy</td>
                                    <td><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></td>
                                </tr>
                                <tr>
                                    <td>FontAwesome</td>
                                    <td>The iconic font designed for use with Twitter Bootstrap</td>
                                    <td><a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">http://fortawesome.github.com/Font-Awesome/</a></td>
                                </tr>
                                <tr>
                                    <td>Simple Line Icons</td>
                                    <td> Simple Line Icons is 162 simple stroke icons that are great for mobile applications, 
websites, user interfaces, etc. All icons were converted from the same beautiful 
simple line icon sets released previously on GraphicBurger.</td>
                                    <td><a href="http://graphicburger.com/simple-line-icons-webfont/" target="_blank">http://graphicburger.com/simple-line-icons-webfont/</a></td>
                                </tr>
                                <tr>
                                    <td>Open Sans</td>
                                    <td>
                                        Metornic uses Open Sans web font from google fonts:
                                        http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all
                                    </td>
                                    <td><a href="http://www.google.com/webfonts" target="_blank">http://www.google.com/webfonts</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="log">
                        <div class="page-header">
                            <h1>14. Change Log</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <style>
                            .changelog-list ul {
                                margin: 5px 20px;
                                padding: 0;
                            }

                            .changelog-list li {
                                padding: 5px;
                            }
                        </style>
                        <div class="changelog-list"  style="height: 500px; overflow-y:auto; border: 1px solid #ddd; background: #fff; padding: 20px;">

                        <h4>Version 4.5.6 – 20 April 2016(Both LTR and RTL versions)</h4>
                        <ul>       
                            <li>
                                NEW: 2 Cookie Consent Pages For UE Laws
                                <ul>
                                    <li>Added html file: <code>page_cookie_consent_1.html</code>, <code>page_cookie_consent_2.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Vertical Timeline Component
                                <ul>
                                    <li>Added html file: <code>ui_timeline_2.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Horizontal Timeline Component
                                <ul>
                                    <li>Added html file: <code>ui_timeline_horizontal.html</code></li>
                                    <li>Added plugin folder: <code>assets/global/horizontal-timeline</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Table Plugin Integration
                                <ul>
                                    <li>Added html file: <code>table_bootstrap.html</code></li>
                                    <li>Added plugin folder: <code>assets/global/bootstrap-table</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: CSS Based Custom Checkbox and Radio Buttons Instead Of Uniformjs Ones(refer to form_controls.html)
                                <ul>
                                    <li>Modified: <code>all html templates</code></li>
                                    <li>Removed plugin: <code>assets/global/plugins/uniformjs</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                </ul>
                            </li> 
                            <li>
                                ENHANCEMENT: Image Path Global Variables In SASS Files
                                <ul>
                                    <li>Modified file: <code>scss/global/_variables.scss</code></li>
                                    <li>Modified file: <code>scss/layouts/layout/_variables.scss</code></li>
                                    <li>Modified file: <code>scss/layouts/layout2/_variables.scss</code></li>
                                    <li>Modified file: <code>scss/layouts/layout3/_variables.scss</code></li>
                                    <li>Modified file: <code>scss/layouts/layout4/_variables.scss</code></li>
                                    <li>Modified file: <code>scss/layouts/layout5/_variables.scss</code></li>
                                    <li>Modified file: <code>scss/layouts/layout6/_variables.scss</code></li>
                                    <li>Modified file: <code>scss/layouts/layout7/_variables.scss</code></li>
                                </ul>
                            </li> 
                            
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br> 
                                - Bootstrap summernote z-index issue on fullscreen mode<br> 
                                - line tabs border issue<br> 
                                - Small input(input-sm) margin issue in horizontal form layout<br> 
                                - Session Timeout Page's progress bar text issue in admin material design skin<br> 
                                - btn-sm and btn-xs same size issue in buttons demo page<br> 
                                - UI Nestable drag & drop issue on chrome<br> 
                                - Workaround for datepicker, timepicker, datetimepicker scrolling issue on  modal<br> 
                                - Admin 3 menu hover issue on mobile<br> 
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/app.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/layouts/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout6/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout7/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/layouts/global/scripts/quick-sidebar.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>

                                    <li>Modified css files: <code>assets/layouts/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout6/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.5.5 – 19 March 2016(Both LTR and RTL versions)</h4>
                        <ul>       
                            <li>
                                NEW: Recent Works Widget
                                <ul>
                                    <li>Changed html file: <code>index.html</code>, <code>dashboard_2.html</code>, <code>dashboard_3.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Recent Projects Widget
                                <ul>
                                    <li>Changed html file: <code>index.html</code>, <code>dashboard_2.html</code>, <code>dashboard_3.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Recent Users Widget
                                <ul>
                                    <li>Changed html file: <code>index.html</code>, <code>dashboard_2.html</code>, <code>dashboard_3.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Recent Events Widget
                                <ul>
                                    <li>Changed html file: <code>index.html</code>, <code>dashboard_2.html</code>, <code>dashboard_3.html</code></li>
                                </ul>
                            </li> 
                             <li>
                                NEW: Sidebar Menu For Admin 5
                                <ul>
                                    <li>Changed html files: <code>all admin 5 folder</code></li>
                                </ul>
                            </li>

                            <li>
                               UPDATE: jQuery v1.12.1
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery.min.js</code></li>
                                </ul>
                            </li> 

                            <li>
                               UPDATE: Datatables v1.10.11
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/datatables</code></li>
                                </ul>
                            </li>   

                            <li>
                               UPDATE: Summernote v0.8.1
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-summernote</code></li>
                                </ul>
                            </li> 

                            <li>
                               UPDATE: Bootstrap Confirmation v2.2.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-confirmation</code></li>
                                </ul>
                            </li>  

                            <li>
                               UPDATE: Bootstrap Datepicker v1.5.1
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-datepicker</code></li>
                                </ul>
                            </li>    

                            <li>
                               UPDATE: jQuery Input Mask v3.2.8-31
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery-inputmask</code></li>
                                </ul>
                            </li> 

                            <li>
                               UPDATE: jQuery Input Mask v3.2.8-31
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery-inputmask</code></li>
                                </ul>
                            </li>               
                            
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br> 
                                - Datatable buttons issue in mobile<br> 
                                - Dropdown overlap issue in datatable demos<br> 
                                - Admin 5 Material design header search icon is not shown<br> 
                                - Session Timeout Page's progress bar text issue in admin material design skin<br> 
                                - btn-sm and btn-xs same size issue in buttons demo page<br> 
                                - Select2 overlapped with hover sidebar dropdown submenus<br> 
                                - Admin 5 Header issue on mobile<br> 
                                - Bootstrap-select issue on RTL version<br> 
                                - Material design checkbox and radios label font issue<br> 
                                - Double scroll bar issue in bootstrap extended modal<br> 
                                - Admin 1 Full Width Layout responsive menu issue<br> 
                                - Header notification bar label issue in admin 5 & admin 6's material design skins
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/app.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/layouts/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout6/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout7/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/layouts/global/scripts/quick-sidebar.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>

                                    <li>Modified css files: <code>assets/layouts/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout6/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.5.4 – 17 January 2016(Both LTR and RTL versions)</h4>
                        <ul>       
                            <li>
                                NEW: Overlay Elements
                                <ul>
                                    <li>New html file: <code>elements_overlay.html</code></li>
                                </ul>
                            </li> 
                             <li>
                                NEW: User Cards Elements
                                <ul>
                                    <li>New html file: <code>elements_cards.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Comments Widget
                                <ul>
                                    <li>Modified html file: <code>index.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Quick Actions Widget
                                <ul>
                                    <li>Modified html file: <code>index.html</code></li>
                                </ul>
                            </li>                   
                            
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br> 
                                - admin 4 horizontal scroll issue on mobile view
                                - admin 6 material design's header search button issue
                                - blank page layout missing
                                - fix missing form in the header of layout_search_on_header_2.html
                                - dropzone display issue in RTL version
                                - icon position issue in input icon component
                                - angularjs sidebar menu's active link state issue
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/app.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/layouts/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout6/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout7/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/layouts/global/scripts/quick-sidebar.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>

                                    <li>Modified css files: <code>assets/layouts/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout6/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.5.3 – 21 December 2015(Both LTR and RTL versions)</h4>
                        <ul>       
                            <li>
                                UPDATE: Latest Bootstrap 3.3.6
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap</code></li>
                                </ul>
                            </li>                            
                            <li>
                                NEW: Axis Labels Plugin for flot
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/flot</code></li>
                                    <li>Updated html file: <code>charts_flotcharts.html</code></li>
                                    <li>Updated script: <code>assets/pages/scripts/charts-flotcharts.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Trigger datatable Button actions from custom dropdown menu
                                <ul>
                                    <li>Updated html file: <code>table_datatables_buttons.html</code></li>
                                    <li>Updated script: <code>assets/pages/scripts/table-datatables-buttons.js</code></li>
                                </ul>
                            </li>     
                            <li>
                                NEW: Blank page layout for admin 6
                                <ul>
                                    <li>New html file: <code>layout_blank_page.html</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: Latest Bootstrap Select v1.9.3
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-select</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: Latest DataTables v1.10.10
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/datatables</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: Bootstrap Confirmation 2.1.3
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-confirmation</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: Bootstrap Selectsplitter v0.1.3
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-selectsplitter</code></li>
                                </ul>
                            </li>                      
                            
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br> 
                                - enable sub menu always open class(always-open) for sidebar menu
                                - include gulp-prettify in package.json
                                - ajax datatable horizontal scroll issue on firefox
                                - admin 5 alert API default container issue
                                - enable sub menu always open class(always-open) for sidebar menu
                                - bootstrap confirmation event handling demo issue
                                - input icon form control's icon position issue on firefox
                                - metronic alert API issue on admin 3 and admin 5
                                - admin 1 badge and arrow position issue with longer link texts
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/app.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/layouts/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout6/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout7/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/layouts/global/scripts/quick-sidebar.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>

                                    <li>Added css files: <code>assets/layouts/global/css/quick-sidebar.css</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout6/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.5.2 – 15 November 2015(Both LTR and RTL versions)</h4>
                        <ul>       
                            <li>
                                NEW: Material Design Form Validation
                                <ul>
                                    <li>New html file: <code>form_validation_md.html</code></li>
                                    <li>New html file: <code>form_validation_states_md.html</code></li>
                                    <li>New js file: <code>assets/pages/scripts/form-validation-md.js</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: HighCharts Plugin Integration
                                <ul>
                                    <li>New html file: <code>charts_highcharts.html</code></li>
                                    <li>New html file: <code>charts_highmaps.html</code></li>
                                    <li>New html file: <code>charts_highstock.html</code></li>
                                    <li>New js file: <code>assets/pages/scripts/charts-highcharts.js</code></li>
                                    <li>New js file: <code>assets/pages/scripts/charts-highmaps.js</code></li>
                                    <li>New js file: <code>assets/pages/scripts/charts-highstock.js</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: List Elements
                                <ul>
                                    <li>New html file: <code>elements_lists.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Step Elements
                                <ul>
                                    <li>New html file: <code>elements_steps.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Ribbon Elements
                                <ul>
                                    <li>New html file: <code>elements_ribbons.html</code></li>
                                </ul>
                            </li> 

                            <li>
                                PlUGIN UPDATE: jQuery Inputmask v3.2.3
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery-inputmask</code></li>
                                </ul>
                            </li>

                            <li>
                                PlUGIN UPDATE: Bootstrap Daterangepicker v2.1.13
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-daterangepicker</code></li>
                                </ul>
                            </li>
                            
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - bootstrap list group item disabled state color issue
                                - datatable buttons extension's "columns" dropdown restyle
                                - draggable modal demo issue in ui_modals.html 
                                - add !important to bg-[color] classes
                                - isabled/readonly input background color issue
                                - dashboard daterangepicker issue
                                - admin 3 AngularJS "Dashboard" menu link hightlight issue
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/app.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/layouts/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout6/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout7/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/layouts/global/scripts/quick-sidebar.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>

                                    <li>Added css files: <code>assets/layouts/global/css/quick-sidebar.css</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout6/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.5.1 – 28 October 2015(Both LTR and RTL versions)</h4>
                        <ul>       
                           
                            <li>
                                NEW: Google Charts Integration
                                <ul>
                                    <li>New html file: <code>charts_google.html</code></li>
                                    <li>New js file: <code>assets/pages/scripts/charts-google.js</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: eCharts Integration
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/echarts</code></li>
                                    <li>New html file: <code>charts_echarts.html</code></li>
                                    <li>New js file: <code>assets/pages/scripts/charts-echarts.js</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: 4 Portfolio Pages
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/cubeportfolio</code></li>
                                    <li>New js file: <code>assets/pages/scripts/portfolio-1.js</code></li>
                                    <li>New js file: <code>assets/pages/scripts/portfolio-2.js</code></li>
                                    <li>New js file: <code>assets/pages/scripts/portfolio-3.js</code></li>
                                    <li>New js file: <code>assets/pages/scripts/portfolio-4.js</code></li>
                                    <li>New html file: <code>page_general_portfolio_1.html</code></li>
                                    <li>New html file: <code>page_general_portfolio_2.html</code></li>
                                    <li>New html file: <code>page_general_portfolio_3.html</code></li>
                                    <li>New html file: <code>page_general_portfolio_4.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW: Datatables Horizontal Scrollbar Support
                                <ul>
                                    <li>New html file: <code>table_datatables_scroller.html</code></li>
                                    <li>New js file: <code>assets/pages/scripts/table-datatables-scroller.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 200+ Free Stock Photos
                                <ul>
                                    <li>Added into folder: <code>assets/global/img/portfolio</code></li>
                                </ul>
                            </li> 

                            
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - fix table-scrollable missing class issue
                                - accordion sidebar menu issue in admin 2 angularjs version
                                - admin 3 main menu issue on mobile
                                - icon buttons font color issue in material design version
                                - migrate to js.cookie.min.js plugin
                                - angularjs version App.init() dublicate call
                                - fullcalendar arrow icons not visible
                                - datatables 'check all' feature does not work
                                - mobile menu close on link click on angularjs versions
                                - hover dropdown plugin issue
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/app.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/layouts/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout6/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout7/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/layouts/global/scripts/quick-sidebar.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>

                                    <li>Added css files: <code>assets/layouts/global/css/quick-sidebar.css</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout6/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.5.0 – 21 October 2015(Both LTR and RTL versions)</h4>
                        <ul>     
                            <li>
                                NEW FEATURE: New Todo App
                                <ul>
                                    <li>Added html template: <code>app_todo.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: 2 New Login Pages
                                <ul>
                                    <li>Added html template: <code>page_user_login_5.html</code>, <code>page_user_login_6.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW FEATURE: New About Page
                                <ul>
                                    <li>Added html template: <code>page_general_about.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: New Contact Page
                                <ul>
                                    <li>Added html template: <code>page_general_contact.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: 5 New Contact Pages
                                <ul>
                                    <li>Added html template: <code>page_general_search.html</code>, <code>page_general_search_2.html</code>
                                    <code>page_general_search_3.html</code>, <code>page_general_search_4.html</code>, <code>page_general_search_5.html</code>
                                    </li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: New FAQ Page
                                <ul>
                                    <li>Added html template: <code>page_general_faq.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW FEATURE: 2 New Pricing Table Options
                                <ul>
                                    <li>Added html template: <code>page_general_pricing.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW FEATURE: New Blog Page
                                <ul>
                                    <li>Added html template: <code>page_general_blog.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW FEATURE: New Blog Post Page
                                <ul>
                                    <li>Added html template: <code>page_general_blog_post.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: New Invoice Page
                                <ul>
                                    <li>Added html template: <code>page_general_invoice_2.html</code></li>
                                </ul>
                            </li> 

                            <li>
                                NEW FEATURE: Enhanced Color Library
                                <ul>
                                    <li>Added html template: <code>ui_colors.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: New Enhanced Button Styles
                                <ul>
                                    <li>Modified html template: <code>ui_buttons.html</code></li>
                                </ul>
                            </li>

                            <li>
                                NEW FEATURE: Datatable Buttons Extension
                                <ul>
                                    <li>Added html template: <code>table_datatables_buttons.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: Datatable Responsive Extension
                                <ul>
                                    <li>Added html template: <code>table_datatables_responsive.html</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW FEATURE: Datatable FixedHeader Extension
                                <ul>
                                    <li>Added html template: <code>table_datatables_fixedheader.html</code></li>
                                </ul>
                            </li> 
                            

                            <li>
                                NEW PlUGIN: Bootstrap Tagsinput Plugin
                                <ul>
                                    <li>Added folder: <code>assets/global/bootstrap-tagsinput</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW PlUGIN: Counterup Plugin
                                <ul>
                                    <li>Added folder: <code>assets/global/counterup</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW PlUGIN: Socicon Plugin
                                <ul>
                                    <li>Added folder: <code>assets/global/Socicon</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW PlUGIN: Codeminor Plugin Integration
                                <ul>
                                    <li>Added folder: <code>assets/global/codeminor</code></li>
                                </ul>
                            </li> 
                            <li>
                                NEW PlUGIN: Flowchart
                                <ul>
                                    <li>Added folder: <code>assets/global/flowchart</code></li>
                                </ul>
                            </li> 
                            <li>
                                PlUGIN UPDATE: jQuery v1.11.3
                                <ul>
                                    <li>Updated file: <code>assets/global/plugins/jquery.min.js</code></li>
                                </ul>
                            </li>                            
                            <li>
                                PlUGIN UPDATE: Select2 4.0.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/select2</code></li>
                                </ul>
                            </li>                            
                            <li>
                                PlUGIN UPDATE: Datatables v1.10.8
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/datatables</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: jQuery BlockUI v2.70.0
                                <ul>
                                    <li>Updated file: <code>assets/global/plugins/jquery.blockui.min.js</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Pace v1.0.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/pace</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: jsTree v3.2.1
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jstree</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Bootstrap Session Timeout v3.2.1
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-sessiontimeout</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Bootstrap Select v1.7.2
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-select</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Typeahead v0.11.1
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/typeahead</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Bootstrap Password Strength v1.2.7
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-pwstrength</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Bootstrap Maxlength v1.6.0 
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-maxlength</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: jQuery Inputmask v3.2.1-29
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery-inputmask</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Bootstrap Select Splitter
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-selectsplitter</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Bootstrap Summernote v0.6.16
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-summernote</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Bootstrap Markdown v2.9.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-markdown</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: nouislider v8.0.2
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/nouislider</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: ion.rangeslider v2.0.13
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/ion.rangeslider</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: jQuery File Upload
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery-file-upload</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Fullcalendar v2.4.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/fullcalendar</code></li>
                                </ul>
                            </li>
                            <li>
                                PlUGIN UPDATE: Amcharts
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/amcharts</code></li>
                                </ul>
                            </li>
                            <li>
                                CHANGE: Sub Theme Folder Strucutre Change
                                - 'assets/admin' folder changed to 'assets/layouts'
                                - sub theme HTML tempaltes moved to one level up
                                - global partials(e.g: quick sidebar) js and css files moved to 'assets/layouts/global' folder
                            </li> 

                            <li>
                                CHANGE: metronic.js globally changed to app.js
                                - Class name 'Metronic' changed to 'App'
                            </li>  

                            <li>
                                CHANGE: SASS files global optimization and refactoring
                            </li> 

                            <li>
                                ENHANCEMENT: Added theme's minifed css and js files
                            </li>
                            <li>
                                ENHANCEMENT: Gulp Task Integrating For SASS compilation, HTML formatting, CSS & JS minification and RTL conversion.
                                <ul>
                                    <li>Added gulp file: <code>gulpfile.js</code></li>                                    
                                    <li>Added gulp file: <code>package.json</code></li>  
                                </ul>
                            </li>

                            <li>
                                FIX: Global Code Improvements & Bug Fixes:<br>
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/layouts/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout6/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/layouts/layout7/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/layouts/global/scripts/quick-sidebar.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>

                                    <li>Added css files: <code>assets/layouts/global/css/quick-sidebar.css</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/layouts/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout6/css/*</code></li>
                                    <li>Modified css files: <code>assets/layouts/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.1.0 – 22 July 2015(Both LTR and RTL versions)</h4>
                        <ul>       
                           
                            <li>
                                NEW: Admin 7 Theme
                                <ul>
                                    <li>Added folder: <code>templates/admin7</code></li>
                                    <li>Added folder: <code>templates/admin7_material_desing</code></li>
                                    <li>Added folder: <code>sass/admin/layout7</code></li>
                                    <li>Added folder: <code>assets/admin/layout7</code></li>
                                </ul>
                            </li> 
                            <li>
                                UPDATE: Jquery Validation Update v1.14.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery-validation</code></li>
                                </ul>
                            </li> 
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - flip scroll responsive table issue
                                - floating inputs preset value issue
                                - long modal scroll issue
                                - search button bug in admin4 header
                                - ui confirmaiton close Btn Issue
                                - added breadcrumb support for admin 6
                                - material design button ripple effect issue on mac safari
                                - admin 1 sidebar sub menu expand issue on mobile
                                - scroll to top z-index issue
                                - table managed demo(datatables) page i18n issue
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout6/scripts/layout.js</code></li>  
                                    <li>Added javascript file: <code>assets/admin/layout7/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout6/css/*</code></li>
                                    <li>Added css files: <code>assets/admin/layout7/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.0.2 – 22 June 2015(Both LTR and RTL versions)</h4>
                        <ul>       
                           
                            <li>
                                UPDATE: Latest Bootstrap 3.3.5
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap</code></li>
                                </ul>
                            </li> 
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout5/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout6/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout5/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout6/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 4.0 – 12 June 2015(Both LTR and RTL versions)</h4>
                        <ul> 
                            <li>
                                NEW: Admin 6 Theme
                                <ul>
                                    <li>Added folder: <code>templates/admin6</code></li>
                                    <li>Added folder: <code>templates/admin6_material_desing</code></li>
                                    <li>Added folder: <code>sass/admin/layout6</code></li>
                                    <li>Added folder: <code>assets/admin/layout6</code></li>
                                </ul>
                            </li>  

                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout5/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.9.0 – 7 May 2015(Both LTR and RTL versions)</h4>
                        <ul> 
                            <li>
                                NEW: Admin 5 Theme
                                <ul>
                                    <li>Added folder: <code>templates/admin5</code></li>
                                    <li>Added folder: <code>templates/admin5_material_desing</code></li>
                                    <li>Added folder: <code>sass/admin/layout5</code></li>
                                    <li>Added folder: <code>assets/admin/layout5</code></li>
                                </ul>
                            </li>  
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - material design admin 3 theme's news page issue<br>
                                - date paginator compatibility issue with latest datepicker plugin<br>
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-datepicker</code></li>

                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.8.1 – 20 April 2015(Both LTR and RTL versions)</h4>
                        <ul> 
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - material design group input height issue<br>
                                - fontawesome input icon position issue<br>
                                <ul>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-md.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.8.0 – 20 April 2015(Both LTR and RTL versions)</h4>
                        <ul>       
                            <li>
                                NEW: Textarea Autosize Plugin
                                <ul>
                                    <li>Modified html file: <code>components_form_tools2.html</code></li>
                                    <li>Added plugin folder: <code>assets/global/plugins/autosize/</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                </ul>
                            </li> 
                            <li>
                                UPDATE: Latest Bootstrap 3.3.4
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap</code></li>
                                </ul>
                            </li> 
                            <li>
                                UPDATE: Latest Bootstrap Switch v3.3.2
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-switch</code></li>
                                </ul>
                            </li> 
                            <li>
                                UPDATE: Latest Bootstrap Datepicker v1.4.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap-datepicker</code></li>
                                </ul>
                            </li> 
                            <li>
                                UPDATE: Latest Bootbox.js v4.4.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootbox</code></li>
                                </ul>
                            </li>  
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - fix custom file input file name text overflow issue<br>
                                - admin 3 material design footer link color issue<br>
                                - App.scrollTo() function issue in admin 3<br>
                                - floating label input with value overlap issue<br>
                                - fontawesome fa-stack class issue<br>
                                - unfocusable input issue in draggable portlets<br>
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.7.0 – 21 March 2015(Both LTR and RTL versions)</h4>
                        <ul>       
                            <li>
                                NEW: Material Desing Theme For Admin 1, Admin 2, Admin 3 and Admin 4
                                <ul>
                                    <li>Added folder: <code>templates/admin_material_design</code></li>
                                    <li>Added folder: <code>templates/admin1_material_design</code></li>
                                    <li>Added folder: <code>templates/admin2_material_design</code></li>
                                    <li>Added folder: <code>templates/admin3_material_design</code></li>
                                    <li>Added css file: <code>assets/global/css/components-md.css</code></li>
                                    <li>Added css file: <code>assets/global/css/plugins-md.css</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                </ul>
                            </li>  
                            <li>
                                NEW: Material Desing Form Controls(Line inputs, floating label inputs, animated checkbox and radios)
                                <ul>
                                    <li>Added html file: <code>form_controls_md.html</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                </ul>
                            </li> 
                            <li>
                                FIX: Improvements & Minor Bug Fixes:
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.6.3 – 10 March 2015(Both LTR and RTL versions)</h4>
                        <ul>        
                            <li>
                                NEW: Responsive Email Templates
                                <ul>
                                    <li>Added html file: <code>email_template1.html</code></li>
                                    <li>Added html file: <code>email_template2.html</code></li>
                                    <li>Added html file: <code>email_template3.html</code></li>
                                    <li>Added html file: <code>email_template4.html</code></li>
                                </ul>
                            </li>                         
                            <li>
                                NEW: Bootstrap Growl Notifications
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/bootstrap-growl</code></li>
                                    <li>Added demo script:   <code>assets/admin/pages/scripts/ui-bootstrap-growl.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Selectsplitter
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/bootstrap-selectsplitter</code></li>
                                    <li>Added demo script:   <code>assets/admin/pages/scripts/components-form-tools2.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: jQuery Minicolors
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/jquery-minicolors</code></li>
                                    <li>Added demo script:   <code>assets/admin/pages/scripts/components-form-tools2.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Tabdrop
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/tabdrop</code></li>
                                    <li>Updated js file:   <code>assets/global/scripts/metronic.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Draggable Modal
                                <ul>
                                    <li>Updated html file:   <code>ui_modals.html</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: noUiSlider v7.0.10
                                <ul>
                                    <li>Updated plugin folder:   <code>assets/global/plugins/nouislider</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: 
                                <ul>
                                    <li>Updated plugin folder:   <code>assets/global/plugins/nouislider</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - css validation errors<br>
                                - datatables datatools extension: copy button popup message issue<br>
                                - modals and select2 z-index issue on portlet fullscreen mode<br>
                                - configurable image paths in SCSS files.<br>
                                - admin 2 theme header issue on mobile mode<br>
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.6.2 – 03 February 2015(Both LTR and RTL versions)</h4>
                        <ul>                                 
                            <li>
                                NEW: Bootstrap Context Menu
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/bootstrap-contextmenu</code></li>
                                    <li>Added html template: <code>theme/templates/admin/components_context_menu.html</code></li>
                                    <li>Added demo script:   <code>assets/admin/pages/scripts/components-context-menu.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Tree Table
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/bootstrap-gtreetable</code></li>
                                    <li>Added html template: <code>theme/templates/admin/table_tree.html</code></li>
                                    <li>Added demo script:   <code>assets/admin/pages/scripts/table-tree.js</code></li>
                                </ul>
                            </li>
                             <li>
                                UPDATED: Bootstrap 3.3.2
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap/</code></li>
                                </ul>
                            </li>                            
                            <li>
                                UPDATED: Font Awesome 4.3.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/font-awesome/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATED: AngularJS and Related Plugins
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/angularjs/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATED: jQuery v1.11.2
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/jquery.min.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Improvements & Minor Bug Fixes:<br>
                                - css validation errors<br>
                                - ajax modal content loading bar not shown<br>
                                - modals issuw with fixed header menu<br>
                                - fa-spin animation conflict with icon input's fixed icon height<br>
                                - admin4 layout's broken top bar issue<br>
                                - new timeline image border issue in safari<br>
                                - new timeline issue with less content<br>
                                - browser scrollbar customization issue(use default style)<br>
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.6.1 – 24 December 2014(Both LTR and RTL versions)</h4>
                        <ul>     
                            <li>
                                NEW: New Pages for Admin 4 Layout
                                <ul>
                                    <li>Updated folder: <code>templates/admin4/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Improvements & Minor Bug Fixes 
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout4/scripts/layout.js</code></li>  
                                                                                            
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li>
                                    <li>Modified css files: <code>assets/admin/layout4/css/*</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.6 – 11 December 2014(Both LTR and RTL versions)</h4>
                        <ul>     
                            <li>
                                NEW: New Admin 4 Layout
                                <ul>
                                    <li>Added folder: <code>templates/admin4/</code></li>
                                    <li>Added folder: <code>assets/admin/layout4</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Improvements & Minor Bug Fixes 
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                                                      

                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li> 
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.5.2 – 8 December 2014(Both LTR and RTL versions)</h4>
                        <ul>     
                            <li>
                                NEW: Bootstrap Confirmation
                                <ul>
                                    <li>Added html file: <code>templates/admin/ui_confirmations.html</code></li>
                                    <li>Added plugin folder: <code>assets/global/plugins/bootstrap-confirmation</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Improvements & Minor Bug Fixes 
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                                                      

                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li> 
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.5.1 – 25 November 2014(Both LTR and RTL versions)</h4>
                        <ul>                                
                            <li>
                                UPDATED: Bootstrap 3.3.1
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATED: AngularJS and AngularJS Related Plugins
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/angularjs/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Timeline Page
                                <ul>
                                    <li>Added html file: <code>templates/admin/page_timeline.html</code></li>
                                    <li>Modified css file: <code>assets/admin/pages/css/timeline.css</code></li>
                                    <li>Added javascript file: <code>assets/admin/pages/scripts/timeline.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Improvements & Minor Bug Fixes 
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                                                      

                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components-rounded.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li> 
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.5 – 11 November 2014(Both LTR and RTL versions)</h4>
                        <ul>                                
                            <li>
                                UPDATED: Bootstrap 3.3.0
                                <ul>
                                    <li>Updated folder: <code>assets/global/plugins/bootstrap/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Rounded Style For Admin Themes
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/demo.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/demo.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/demo.js</code></li>  
                                                                      
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Added css file: <code>assets/global/css/components-rounded.css</code></li>

                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li> 
                                </ul>
                            </li>
                            <li>
                                FIX: Minor Bug Fixes
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                                                      

                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>

                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li> 
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.4 – 4 November 2014(Both LTR and RTL versions)</h4>
                        <ul>    
                            <li>
                                NEW: AngularJS Version for Admin1, Admin2 and Admin3 Themes
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/angularjs</code></li>
                                    <li>Added html files folder: <code>templates/admin/angularjs</code></li>
                                    <li>Added html files folder: <code>templates/admin2/angularjs</code></li>
                                    <li>Added html files folder: <code>templates/admin3/angularjs</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 2 Login Pages
                                <ul>
                                    <li>Modified html file: <code>templates/admin/login.html</code></li>
                                    <li>Added html file: <code>templates/admin/login_2.html</code></li>
                                    <li>Added html file: <code>templates/admin/login_3.html</code></li>  
                                    <li>Modified html file: <code>templates/admin2/login.html</code></li>
                                    <li>Added html file: <code>templates/admin2/login_2.html</code></li>
                                    <li>Added html file: <code>templates/admin2/login_3.html</code></li>  
                                    <li>Modified html file: <code>templates/admin3/login.html</code></li>
                                    <li>Added html file: <code>templates/admin3/login_2.html</code></li>
                                    <li>Added html file: <code>templates/admin3/login_3.html</code></li>  
                                                                      
                                    <li>Modified css file: <code>assets/admin/pages/css/login.css</code></li>
                                    <li>Added css file: <code>assets/admin/pages/css/login2.css</code></li>
                                    <li>Added css file: <code>assets/admin/pages/css/login3.css</code></li>
                                </ul>
                            </li>                            
                            <li>
                                NEW: User Locked Page
                                <ul>
                                    <li>Modified html file: <code>templates/admin/extra_lock.html</code></li>
                                    <li>Added html file: <code>templates/admin/extra_lock2.html</code></li>     
                                    <li>Modified html file: <code>templates/admin2/extra_lock.html</code></li>
                                    <li>Added html file: <code>templates/admin2/extra_lock2.html</code></li>     
                                    <li>Modified html file: <code>templates/admin3/extra_lock.html</code></li>
                                    <li>Added html file: <code>templates/admin3/extra_lock2.html</code></li>     

                                    <li>Modified css file: <code>assets/admin/pages/css/lock.css</code></li>
                                    <li>Added css file: <code>assets/admin/pages/css/login2.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: jQuery Inputmask v3.0.3
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-inputmask/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Minor Bug Fixes
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                                                      

                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>

                                    <li>Modified css files: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css files: <code>assets/admin/layout3/css/*</code></li> 
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.3.1 – 14 October 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: amCharts Library Integration
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/amcharts</code></li>
                                    <li>Added html file: <code>templates/admin/charts_amcharts.html</code></li>
                                    <li>Added javascript file: <code>assets/admin/pages/scripts/charts_amcharts.js</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Profile Page
                                <ul>
                                    <li>Added html file: <code>templates/admin/extra_profile.html</code></li>
                                    <li>Added html file: <code>templates/admin/extra_profile_account.html</code></li>
                                    <li>Added html file: <code>templates/admin/extra_profile_help.html</code></li>
                                    <li>Added javascript file: <code>assets/admin/pages/scripts/profile.js</code></li>
                                    <li>Added css file: <code>assets/admin/pages/css/profile.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: iCheck Plugin Integration
                                <ul>
                                    <li>Added html file: <code>templates/admin/form_icheck.html</code></li>
                                    <li>Added javascript file: <code>assets/admin/pages/scripts/profile.js</code></li>
                                    <li>Added plugin folder: <code>assets/global/plugins/icheck/</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Fullscreen Portlet Mode
                                <ul>
                                    <li>Modified html files: <code>all portlet related code</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Page & Block Loading Bar with CSS3 Animation
                                <ul>
                                    <li>Modified html file: <code>ui_blockui.html</code></li>
                                    <li>Modified javascript file: <code>assets/admin/pages/scripts/ui_blockui.js</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Summernote Plugin 
                                <ul>
                                    <li>Added folder: <code>assets/global/plugins/bootstrap-summernote/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: jQuery 1.11.1
                                <ul>
                                    <li>Updated plugin file: <code>assets/global/plugins/jquery.min.js</code></li>
                                    <li>Updated plugin file: <code>assets/global/plugins/jquery.min.map</code></li>
                                    <li>Updated plugin file: <code>assets/global/plugins/jquery-migrate.min</code></li>
                                </ul>
                            </li>                            
                            <li>
                                UPGRADE: Fontawesome v4.2.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/font-awesome/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: FullCalendar v2.1.1
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/fullcalendar/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: jQuery Multiselect v0.9.11
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-multi-select/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: GMaps.js v0.4.15
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/gmaps/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootbox v4.3.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootbox/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Daterangepicker v1.3.13
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-daterangepicker/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Maxlength v1.5.7 
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-maxlength/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Modal v2.2.5
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-modal/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Select v1.6.3
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-select/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Switch v3.0.2
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-switch/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap TouchSpin v3.0.1
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-touchspin/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: CKEditor v4.4.5
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/ckeditor/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Bootstrap Markdown v2.7.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-markdown/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: FullCalendar v1.6.4
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/fullcalendar/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: GMaps.js v0.4.11
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/gmaps/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Bootstrap Password Strength v1.2.2
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-pwstrength/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Bootstrap Toastr v2.1.0 
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-toastr/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery File Upload v9.8.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-file-upload/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery Inputmask v3.0.3
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-inputmask/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Bootstrap Summernote v0.5.10
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-summernote/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Dropzone v3.10.2
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/dropzone/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jsTree v3.0.4
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jstree/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: DataTables 1.10.2
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/datatables/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Select2 v3.5.1
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/select2/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Typeahead.js 0.10.5
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/typeahead/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Minor Bug Fixes
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>  
                                    <li>Modified javascript file: <code>assets/admin/layout3/scripts/layout.js</code></li>  
                                                                      

                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>

                                    <li>Modified css file: <code>assets/admin/layout/css/*</code></li> 
                                    <li>Modified css file: <code>assets/admin/layout2/css/*</code></li> 
                                    <li>Modified css file: <code>assets/admin/layout3/css/*</code></li> 
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.3.0 – 24 September 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: New Admin Layout Option
                                <ul>
                                    <li>Added folder: <code>assets/admin/layout3/</code></li>
                                    <li>Added folder: <code>sass/admin/layout3/</code></li>
                                    <li>Added folder: <code>templates/admin3/</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Some Global Code Improvements
                                <ul>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                </ul>
                            </li>                            
                            <li>
                                IMPROVEMENT: Some Code Improvements For Admin 1
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Some Code Improvements For Admin 2
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout2/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout2/css/themes/*</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout2/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Minor Bugs Fixes
                                <ul>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.2.0 – 03 September 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Admin Layout Option
                                <ul>
                                    <li>Added folder: <code>assets/admin/layout2/</code></li>
                                    <li>Added folder: <code>templates/admin2/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Todo/Task Module
                                <ul>
                                    <li>Added html file: <code>page_todo.css</code></li>
                                    <li>Added css file: <code>assets/admin/pages/css/todo.css</code></li>
                                    <li>Added javascript file: <code>assets/admin/pages/scripts/todo.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Sidebar Menu Category
                                <ul>
                                    <li>Modified html file: <code>all html pages</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Some Code Improvements
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Minor Bugs
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                        </ul>
                     
                        <h4>Version 3.1.3 – 04 August 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Sidebar Menu With Hover Submenus(refer to the theme customizer)
                                <ul>
                                    <li>Modified html file: <code>templates/admin/index_2.html</code></li>
                                    <li>Modified html file: <code>templates/admin/index_3.html</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Added javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Light Sidebar Menu Style(refer to the theme customizer)
                                <ul>
                                    <li>Modified html file: <code>templates/admin/index_2.html</code></li>
                                    <li>Modified html file: <code>templates/admin/index_3.html</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Added javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Light Portlets And Form Layouts Integration
                                <ul>
                                    <li>Modified html file: <code>templates/admin/form_layouts.html</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: More Smooth Draggable Portlets 
                                <ul>
                                    <li>Modified html file: <code>templates/admin/portlet_draggable.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Added javascript file: <code>assets/admin/pages/scripts/portlet-draggable.js</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Responsive Portlets 
                                <ul>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Responsive Page Breadcrumbs & Toolbar 
                                <ul>
                                    <li>Modified html files: <code>templates/admin/*</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                             <li>
                                IMPROVEMENT: The Demo Code seperated into demo.js file 
                                <ul>
                                    <li>Modified html files: <code>templates/admin/*</code></li>
                                    <li>Added javascript file: <code>assets/admin/layout/scripts/demo.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Ajax Datatables Loading Bar Not Centered
                                <ul>
                                    <li>Modified html file: <code>templates/admin/table_ajax.html</code></li>
                                    <li>Added javascript file: <code>assets/global/scripts/datatable.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Header Userbar Padding Issue When No User Photo Used
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Header Toggler Icon & Search Bar Position Issue On Latest Chrome v36.x
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.1.2 – 17 July 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Dashboard With New Portlet Style(light portlets)
                                <ul>
                                    <li>Added html file: <code>templates/admin/index_2.html</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Dashboard With New Content Style
                                <ul>
                                    <li>Added html file: <code>templates/admin/index_3.html</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Light Portlets(new style)
                                <ul>
                                    <li>Added html file: <code>templates/admin/portlet_general2.html</code></li>
                                    <li>Added html file: <code>templates/admin/portlet_general3.html</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Circle Buttons & Icons
                                <ul>
                                    <li>Modified html file: <code>templates/admin/ui_buttons.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Circle Form Inputs
                                <ul>
                                    <li>Modified html file: <code>templates/admin/form_controls.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Some Bug Fixes & Code Improvements
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/datatable.js</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.1.1 – 01 July 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                UPDATE: Bootstrap 3.2.0
                                <ul>                                    
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap/</code></li>
                                    <li>Modified html files: <code>all html files</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Auto Closable Sidebar Search Box
                                <ul>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Light Theme: Header Background Issue On Mobile
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/themes/light.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Datatable.js Minor Bug Fixes
                                <ul>
                                    <li>Modified javascript file: <code>assets/global/scripts/datatable.js</code></li>
                                    <li>Updated folder: <code>assets/global/plugins/datatables/plugins/bootstrap/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Some Other Minor Bug Fixes
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.1 – 09 June 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Quick Sidebar with Chat, Notifications & Settings Tabs
                                <ul>                                    
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                    <li>Added javascript file: <code>assets/admin/layout/scripts/quick-sidebar.js</code></li>
                                    <li>Modified html files: <code>all html files</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Default Layout with Simple Line Icons
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Datatable Scroller Extension Integration
                                <ul>
                                    <li>Modified html file: <code>table_advanced.html</code></li>
                                    <li>Modified javascript file: <code>assets/admin/pages/scripts/table-advanced.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Datatable ColReorder Extension Integration
                                <ul>
                                    <li>Modified html file: <code>table_advanced.html</code></li>
                                    <li>Modified javascript file: <code>assets/admin/pages/scripts/table-advanced.js</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: Datatable 1.10.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/globals/datatable/</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified html files: <code>table_advanced.html</code>, <code>table_advanced.html</code>, <code>table_ajax.html</code>, <code>table_editable.html</code>, <code>table_managed.html</code>, <code>ecommerce_orders.html</code>, <code>ecommerce_orders_view.html</code>, <code>ecommerce_products.html</code>, <code>ecommerce_products_edit.html</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: Fontawesome 4.1.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/globals/font-awesome/</code></li>
                                    <li>Modified html file: <code>ui_icons.html</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: jQuery Nestable 
                                <ul>
                                    <li>Updated plugin folder: <code>assets/globals/jquery-nestable/</code></li>
                                    <li>Modified html file: <code>ui_nestable.html</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: jQuery SlimScroll with Smoth Animation & Windows Phone Support 
                                <ul>
                                    <li>Updated plugin folder: <code>assets/globals/jquery-slimscroll/</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/metronic.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: User Bar Background Issue On Mobile 
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Header Search Box Overlaping Issue On Mobile 
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Full Height Content & Portlet Issue On Window Resize 
                                <ul>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                    <li>Modified html files: <code>layout_full_height_content.html</code>, <code>layout_full_height_portlet.html</code>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.0.2 – 30 May 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                FIX: Plupload's Vulnerable upload.js Script 
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/plupload/</code></li>
                                    <li>
                                        IMPORTANT!:
                                        Plupload plugin's(plupload.com) examples folder has a vulnerable script upload.php which does not check uploading file extenstions before save it in disk and with a little hack there can be possibility to upload executable scripts to a server. In this v3.0.2 quick release we have upgraded the plupload plugin with the latest available version(v2.1.2) and excluded/removed the examples folder so if you use this plugin you will need to implement the server side upload handler script yourself with file extension validation. if you don't use this plugin you don't have to take any action and still be safe. If you are using Metronic's older versions(v2.x or v3.0.1) then you just need to remove the current plupload plugin's folder from the assets folder and replace it with the one from v3.0.2. Don't worry v3.1 still on strack to be released in a few days.
                                        
                                    </li>
                                </ul>
                            </li>
                        </ul>

                        <h4>Version 3.0.1 – 10 May 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Simple Line Icons Integration
                                <ul>
                                    <li>Added plugin folder: <code>assets/global/plugins/simple-line-icons/</code></li>
                                    <li>Added html file: <code>ui_icons.html</code></li>
                                    <li>Added html file: <code>layout_simple_line_icons.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/global/css/plugins.css</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified css files: <code>assets/admin/layout/css/themes/*</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Full Height Portlet Layout
                                <ul>
                                    <li>Added html file: <code>layout_full_height_portlet.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Full Height Content Layout
                                <ul>
                                    <li>Added html file: <code>layout_full_height_content.html</code></li>
                                    <li>Modified css file: <code>assets/global/css/components.css</code></li>
                                    <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Blue Theme Color
                                <ul>
                                    <li>Updated html files: <code>all</code></li>
                                    <li>Added css file: <code>assets/admin/layout/css/themes/blue.css</code></li>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Ajax Datatables Duplicated Post Parameters Issue
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/data-tables/</code></li>
                                    <li>Modified javascript file: <code>assets/global/scripts/datatable.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Header Search Bar Issue on iOS
                                <ul>
                                    <li>Modified javascript file: <code>assets/admin/layout/scripts/layout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Invoice Layout Issue on Mobile
                                <ul>
                                    <li>Modified html file: <code>extra_invoice</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Multilevel Sidebar Menu Issue When Sidebar Menu is Collapsed
                                <ul>
                                     <li>Modified css file: <code>assets/admin/layout/css/layout.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Sidebar Menu's Highlighted Link Arrow Issue in Light Theme
                                <ul>
                                    <li>Modified css file: <code>assets/admin/layout/css/themes/light.css</code></li>
                                </ul>
                            </li>
                        </ul>

                         <h4>Version 3.0 – 3 May 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: File Structure and Code Optimization
                            </li>
                            <li>
                                NEW: Improved Desing and Rewamped Theme Colors(default, darkblue, grey, light, light2)
                            </li>
                            <li>
                                NEW: Full SASS Support 
                                <ul>
                                    <li>Added folder: <code>metronic/sass</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Summernote Plugin 
                                <ul>
                                    <li>Added folder: <code>assets/global/plugins/bootstrap-summernote/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: jQuery 1.11.0
                                <ul>
                                    <li>Updated plugin file: <code>assets/global/plugins/jquery-1.11.0.min.js</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: jQuery Multiselect v0.9.11
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-multi-select/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Backstretch v2.0.4
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/backstretch/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootbox v4.2.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootbox/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Daterangepicker v1.3.5
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-daterangepicker/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Datepicker v1.3.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-daterangepicker/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Hover Dropdown v2.0.3
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-hover-dropdown/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Maxlength v 1.5.3 
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-maxlength/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Modal v2.2.4
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-modal/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Select v1.5.4
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-select/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap Switch 3
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-switch/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap TouchSpin v2.8.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-touchspin/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: CKEditor Version 4.4.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/ckeditor/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Bootstrap Clockface 1.0.1
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/clockface/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: FullCalendar v1.6.4
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/fullcalendar/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: GMaps.js v0.4.11
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/gmaps/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Ion.RangeSlider V1.9.1
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/ion.rangeslider/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Bootstrap Password Strength v1.1.2
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/bootstrap-pwstrength/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQquery Easypiechart v2.1.5 
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-easypiechart/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery File Upload v9.5.7
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-file-upload/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery Inputmask v3.0.3
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-inputmask/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery Knob v1.2.8
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-knob/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery Slimscroll v1.3.2
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-slimscroll/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery Validation Plugin v1.12.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jquery-validation/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jsTree 3.0.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jstree/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jQuery nouislider 6.1.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/nouislider/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: jsTree 3.0.0
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/jstree/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Pace 0.5.1
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/pace/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: Select2 3.4.6
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/select2/</code></li>
                                </ul>
                            </li>
                             <li>
                                UPGRADE: typeahead.js 0.10.2
                                <ul>
                                    <li>Updated plugin folder: <code>assets/global/plugins/typeahead/</code></li>
                                </ul>
                            </li>
                        </ul>
                        <h4>Version 2.0.2 – 20 February 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                FIX: Fix Google Fonts Load Issue
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Badge Position Issue On Closed Sidebar Menu
                                <ul>
                                    <li>Modified css file: <code>style-responsive.css</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 2.0.1 – 19 February 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Pace - Page Progress Bar
                                <ul>
                                    <li>Added plugin folder: <code>../assets/global/plugins/pace/</code></li>
                                    <li>Added html file: <code>ui_page_progress_style_1.html</code></li>
                                    <li>Added html file: <code>ui_page_progress_style_2.html</code></li>
                                    <li>Added html file: <code>ui_page_progress_style_3.html</code></li>
                                    <li>Added html file: <code>ui_page_progress_style_4.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap 3.2.0
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap/</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery MultiSelect 
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/jquery-multi-select/</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Sidebar Menu Configuration Through HTML Attributes
                                <ul>
                                    <li>Added configuration options: <code>data-auto-scroll="true|false"</code> and <code>data-slide-speed="200"</code></li>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                </ul>
                            <li>
                                IMPROVEMENT: Some Documentation Improvemements & Corrections.
                            </li>
                            <li>
                                FIX: Responsive Mega Menu Issue on Mobile
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                    <li>Modified html file: <code>index_horizontal_menu.html</code></li>
                                    <li>Modified html file: <code>layout_horizontal_menu1.html</code></li>
                                    <li>Modified html file: <code>layout_horizontal_menu2.html</code></li>
                                    <li>Modified html file: <code>layout_horizontal_sidebar_menu.html</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Missing Icons in Fontawesome 4.0.3 & Glypicons Examples
                                <ul>
                                    <li>Modified html file: <code>ui_buttons.html</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Custom File Input Plugin Issue In extra_profile.html Page
                                <ul>
                                    <li>Modified html file: <code>extra_profile.html</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Missing "markdown.js" Required By Bootstrap Markdown Plugin
                                <ul>
                                    <li>Added new javascript file: <code>../assets/global/plugins/bootstrap-markdown/lib/markdown.js</code></li>
                                    <li>Modified html file: <code>components_editors.html</code></li>
                                </ul>
                            </li>
                            <li>
                                DROPPED: Metronic v1.4 version has been dropped from the package.
                            </li>
                        </ul>
                        <br>
                        <h4>Version 2.0 – 12 February 2014(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: E-Commerce Admin Pages
                                <ul>
                                    <li>Added new html file: <code>ecommerce_index.html</code></li>
                                    <li>Added new html file: <code>ecommerce_orders.html</code></li>
                                    <li>Added new html file: <code>ecommerce_orders_view.html</code></li>
                                    <li>Added new html file: <code>ecommerce_products.html</code></li>
                                    <li>Added new html file: <code>ecommerce_products_edit.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: jQuery jsTree Plugin Integration
                                <ul>
                                    <li>Added plugin folder: <code>../assets/global/plugins/jstree/</code></li>
                                    <li>Updated html file: <code>ui_tree.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/ui-tree.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Advance Ajax Datagrid Component Based on Datatabble Plugin
                                <ul>
                                    <li>Added js file: <code>assets/scripts/core/datatable.js</code></li>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/data-tables/</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                    <li>Updated html file: <code>table_ajax.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Responsive Multipurpose Email Templates
                                <ul>
                                    <li>Added html file: <code>email_newsletter.html</code></li>
                                    <li>Added html file: <code>email_system.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Mega Menu In Horizontal Menu
                                <ul>
                                    <li>Updated html file: <code>index_horizontal_menu.html</code></li>
                                    <li>Updated html file: <code>layout_horizontal_menu1.html</code></li>
                                    <li>Updated html file: <code>layout_horizontal_menu2.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                    <li>Modified css files: <code>assets/css/theme/*</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Twitter Typeahead Plugin Integration
                                <ul>
                                    <li>Added plugin folder: <code>../assets/global/plugins/typeahead/</code></li>
                                    <li>Updated html file: <code>components_form_tools.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/components-form-tools.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: jQuery Notific8 Plugin Integration
                                <ul>
                                    <li>Added plugin folder: <code>../assets/global/plugins/jquery-notific8/</code></li>
                                    <li>Added html file: <code>ui_notific8.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/ui-notific8.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Select Plugin Integration
                                <ul>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-select/</code></li>
                                    <li>Added html file: <code>components_dropdowns.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/components-dropdowns.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Metronic's API For Bootstrap Modals
                                <ul>
                                    <li>Updated html file: <code>ui_alert_dialog_api.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/ui-alert-dialog-api.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Ajax Portlets
                                <ul>
                                    <li>Added html file: <code>portlet_ajax.html</code></li>
                                    <li>Added javascript file: <code>assets/scripts/custom/portlet-ajax.js</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: jQuery BlockUI Samples
                                <ul>
                                    <li>Added html file: <code>ui_blockui.html</code></li>
                                    <li>Added javascript file: <code>assets/scripts/custom/ui-blockui.js</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 11 PSD Files
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/extra_profile.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/form_component_part1.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/form_component_part2.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/form_controls.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/layout_horizontal_menu2.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/page_timeline.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/table_basic.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/table_managed.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/ui_buttons.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/ui_general.psd</code></li>
                                </ul>
                                <ul>
                                    <li>Added PSD file: <code>admin/resources/theme_psd/ui_tabs_accordions_navs.psd</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Redesigned Search Box on Header 
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css files: <code>assets/css/themes/*</code></li>
                                    <li>Modified html file: <code>layout_search_on_header.html</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Enable Login Links Via Facebook, Twitter, Google+ & Linkedin 
                                <ul>
                                    <li>Modified html file: <code>login.html</code></li>
                                    <li>Modified html file: <code>login_soft.html</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Inline Help For Form Inputs 
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-metronic.css</code></li>
                                    <li>Modified html file: <code>form_controls.html</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Right Aligned Tabs 
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified html file: <code>ui_tabs_accordions_navs.html</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Load Open Sans Font In HTML Head(before the rest of css files) 
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Bootstrap Accordions With Icons(plus/minus)
                                <ul>
                                    <li>Modified html file: <code>ui_tabs_accordions_navs.html</code></li>
                                    <li>Modified css file: <code>assets/css/style-metronic.css</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Restyled Flot Charts
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/custom/index.js</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/charts.js</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Enable Ajax Links Within Page Content
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: New Social Icons(flickr, foursquare, gravatar, klout, myspace, quora)
                                <ul>
                                    <li>Modified html file: <code>ui_buttons.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                CHANGE: Javascript File Path
                                <ul>
                                    <li>Core scripts folder: <code>../assets/global/plugins/scripts/core/</code></li>
                                    <li>Custom page level scripts Folder: <code>../assets/global/plugins/scripts/custom/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap 3.1.0
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Fontawesome 4.0.3
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/font-awesome/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery Slimscroll Plugin 
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/jquery-slimscroll/</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery Bootpag Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/jquery-bootpag/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery Gmaps Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/gmaps/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery Uniform Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/uniform/</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery File Upload Plugin 
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/jquery-file-upload/</code></li>
                                    <li>Modified html file: <code>form_fileupload.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/form-fileupload.js</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Select2 Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/select2/</code></li>
                                    <li>Modified html file: <code>components_dropdowns.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/custom/components-dropdowns.js</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Jasny Bootstrap File Input Plugin
                                <ul>
                                    <li>New plugin folder: <code>../assets/global/plugins/bootstrap-fileinput/</code></li>
                                    <li>Modified html file: <code>components_form_tools.html</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery Input Mask Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/jquery-inputmask/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Hower Dropdown Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-hover-dropdown/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Makrdown Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-markdown/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Switch Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-switch/</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Wizard Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-wizard/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Touchspin Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-touchspin/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Modal Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-modal/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Timepicker Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-timepicker/</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Daterangepicker Plugin
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-daterangepicker/</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Moment.js Plugin
                                <ul>
                                    <li>Updated plugin file: <code>../assets/global/plugins/moment.min.js</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery BlockUI Plugin
                                <ul>
                                    <li>Updated plugin file: <code>../assets/global/plugins/jquery.blockui.min.js</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Broken Horizontal Menu On 1024px Resolution
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Tiles Aligment Issue On Ipad's Portraits Mode
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Content Height And Footer Position Issue
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Dropdown Aligment Issue In Portlet Actions Bar On Safari
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                DROPPED: Non-responsive Email Templates 
                                <ul>
                                    <li>Removed html files: <code>email1.html</code>, <code>email2.html</code>, <code>email3.html</code>, <code>email4.html</code>, <code>email5.html</code>, <code>email6.html</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.5.5 – 9 December 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                UPDATE: Bootstrap 3.0.3
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 5 PSD Files(Dashboard Page, Email Template, Login page, User Locked Page, Invoice Page)
                                <ul>
                                    <li>Added PSD files: <code>admin/resources/theme_psd/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Right Sidebar Layout Option(check the theme configuration panel)
                                <ul>
                                    <li>Added html file: <code>layout_sidebar_reversed.html</code></li>
                                    <li>Modified html files(refer page-sidebar-wrapper and page-content-wrapper divs): <code>all HTML files</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Search on Header Layout Option
                                <ul>
                                    <li>Added html file: <code>layout_search_on_header.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Style Full Number Pagination For Datetable Plugin 
                                <ul>
                                    <li>Modified html file: <code>table_ajax.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/table-ajax.js</code></li>
                                    <li>Updated plugin folder: <code>assets/css/data-tables/</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Prevent Blocking jquery.cookie.min.js by ModSecurity by changing plugin filename to jquery.cokie.min.js
                                <ul>
                                    <li>Change plugin file name: <code>jquery.cokie.min.js</code></li>
                                    <li>Updates html files: <code>all HTML files</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: jQuery Countdown Plugin v1.6.3
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/countdown</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Coming Soon Page Counter Issue on Safari/Mac 
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/countdown</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Responsive Project List Issue on User Profile Page 
                                <ul>
                                    <li>Modified html file: <code>extra_profile.html</code></li>
                                    <li>Modified css file: <code>assets/css/pages/profile.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Managed Datatable Group Check/Uncheck Issue.
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/table-managed.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Content Height Issue On Sidebar Expand in Sidebar Closed Page.
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Clockface Timepicker z-index issue in Modals.
                                <ul>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Bootstrap Wysihtml5 Insert URL Issue.
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-wysihtml5/</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <br>
                        <h4>Version 1.5.4 – 21 November 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                Update: Bootstrap 3.0.2 Update
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Dashboard With Horizontal Menu
                                <ul>
                                    <li>Added html file: <code>index_horizontal_menu.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: User Session Timeout Plugin Integration
                                <ul>
                                    <li>Added html file: <code>layout_session_timeout.html</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-sessiontimeout/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: User Idle Timeout Plugin Integration
                                <ul>
                                    <li>Added html file: <code>layout_idle_timeout.html</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/jquery-idle-timeout/</code></li>
                                    <li>Added javascript file: <code>assets/scripts/idle-timeout.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Sidebar Toggler Button On Header
                                <ul>
                                    <li>Modified style files: <code>assets/css/style.css</code>, <code>assets/css/style-responsive.css</code></li>
                                    <li>Added html file: <code>layout_sidebar_toggler_on_header.html</code></li>
                                    <li>Modified javascript file folder: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Ajax Datatable Integration
                                <ul>
                                    <li>Added html file: <code>table_ajax.html</code></li>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/data-tables/</code></li>
                                    <li>Added javascript file: <code>assets/scripts/table-ajax.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: jQuery Flot Bar Chart Samples
                                <ul>
                                    <li>Modified html file: <code>charts.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/charts.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Button Dropdown Menu with Search box
                                <ul>
                                    <li>Modified html file: <code>ui_bottons.html</code></li>
                                    <li>Modified style file: <code>assets/css/style-metronic.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Datepicker with Disabled Past Dates
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Bootstrap Modal Issue(when modal opened the page content shifts to the right)
                                <ul>
                                    <li>Modified style files: <code>assets/css/style.css</code>, <code>assets/css/style-metronic.css</code>, <code>assets/css/plugins.css</code></li>
                                    <li>Modified html file: <code>ui_modals.html</code></li>
                                    <li>Modified html file: <code>ui_extended_modals.html</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Bootstrap TouchSpin spinUpClass Parameter Issue 
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-touchspin/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Bootstrap Tab Activation Through URL Issue(parent tabs are not activated) 
                                <ul>
                                    <li>Modified javascript file folder: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Bootstrap WYSIWYG5 Modal Dialogs Issue(duplicated modal containers when bootstrap modal plugin used) 
                                <ul>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/bootstrap-wysihtml5/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Selected Theme Color Not Applied To Horizontal Menu 
                                <ul>
                                    <li>Updated styles folder: <code>assets/css/themes/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Login Form Submit Issue 
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/login.js</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/login-soft.js</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <br>
                        <h4>Version 1.5.3 – 7 November 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Bootstrap TouchSpin Plugin Integration
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form_components.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-touchspin/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Date Paginator Plugin Integration
                                <ul>
                                    <li>Added html file: <code>ui_datepaginator.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/ui_bootbox.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-datepaginator/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootbox.js Plugin Integration
                                <ul>
                                    <li>Added html file: <code>ui_bootbox.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/ui_bootbox.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootbox/</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Input Group, Icon Input, Markdown Input Validation Samples
                                <ul>
                                    <li>Modified html file: <code>form_validation.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-validation.js</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Form Input Validation Samples 
                                <ul>
                                    <li>Modified html file: <code>form_validation.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-validation.js</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Button Dropdown Menu With Multilevel Submenu
                                <ul>
                                    <li>Modified html file: <code>ui_buttons.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/style-metronic.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Bootstrap Switch Samples with Long Text.
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATE: Font Awesome 4.0.1
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified css file: <code>style.css</code></li>
                                    <li>Modified css file: <code>style-metronic.css</code></li>
                                    <li>Modified css file: <code>plugins.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/ui_bootbox.js</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-datepaginator/</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-datepicker/</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-daterangepicker/</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-datetimepicker/</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-editable/</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-timepicker/</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-wysihtml5/</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/bootstrap-fuelux/</code></li>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/font-awesome/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Main Content Height Issue with Fixed Layout on Large Screens
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Language Switch Bar Layout Issue on Mobile Devices 
                                <ul>
                                    <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Image Crop Samples Issue on 1024 screen resolution
                                <ul>
                                    <li>Modified html file: <code>form_image_crop.html</code></li>
                                    <li>Modified css file: <code>assets/css/pages/image-crop.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-image-crop.js</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.5.2 – 21 October 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Bootstrap Maxlength Plugin Integration
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form_components.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-maxlength/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Markdown Editor Plugin Integration
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-markdown/</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Horizontal Scrollable Datatables Adaptable To Any Device Width.
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/date-tables/</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Clickable Form Wizard Steps
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/form_wizard.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Portfolio Item Overlapped Links Issue on Boxed Layout
                                <ul>
                                    <li>Modified html file: <code>page_portfolio.html</code></li>
                                    <li>Modified css file: <code>assets/css/pages/portfolio.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Basic Datatables Issue on Mobile Devices
                                <ul>
                                    <li>Modified html file: <code>table_basic.html</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Form Wizard Steps Alignment Issue On Mobile Devices
                                <ul>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: FullScreen Link Functionality Issue
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                        </ul>
                        </br>
                        <h4>Version 1.5.1 – 17 October 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Extended Bootstrap Modals Plugin
                                <ul>
                                    <li>Added html file: <code>ui_extended_modals.html</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-modal/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Disabled Menu Links for Sidebar Menu, Horizontal Menu & Topbar Menu
                                <ul>
                                    <li>Added html file: <code>layout_disabled_menu.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Google reCaptcha Integration
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: FlipScroll Responsive Datatable
                                <ul>
                                    <li>Modified html file: <code>table_responsive.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Scrollable Responsive Datatable
                                <ul>
                                    <li>Modified html file: <code>table_responsive.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Inline Social Icons
                                <ul>
                                    <li>Modified html file: <code>ui_buttons.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added New Social Icon - Reddit
                                <ul>
                                    <li>Modified html file: <code>ui_buttons.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Added "toast-top-center" & "toast-bottom-center" options for Bootstrap Toastr Notifications.
                                <ul>
                                    <li>Modified html file: <code>ui_toastr.html</code></li>
                                    <li>Modified css file: <code>assets/css/plugins.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Added "No line" Tree View Option for Bootstrap FuelUX Tree.
                                <ul>
                                    <li>Modified html file: <code>ui_tree.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/ui_tree.js</code></li>
                                    <li>Modified plugin folder: <code>../assets/global/plugins/fuelux/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Dashboard Stat Blocks Issue On Window Resize.
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Portfolio Item Issue When Window Resized on Firefox.
                                <ul>
                                    <li>Modified html page: <code>page_portfolio.html</code></li>
                                    <li>Updated plugin folder: <code>../assets/global/plugins/jquery-mixitup/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Bootstrap FuelUX Input Spinner Step Issue.
                                <ul>
                                    <li>Modified javascript file: <code>assets/css/form_component.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Checkbox & Radio Outline Issue on Opera.
                                <ul>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Editable Tables Input Width Issue.
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/table_editable.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Change jquery-ui-1.10.1.custom.min.js to jquery-ui-1.10.3.custom.min.js on all pages
                                <ul>
                                    <li>Modified html file: <code>all occured pages</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.5 – 7 October 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Bootstrap 3.0 Support
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified css files: <code>all css files</code></li>
                                    <li>Modified js files: <code>all js files</code></li>
                                    <li>Added js files(to support BS2 autocomplete feature since it was dropped in BS3): 
                                        <code>../assets/global/plugins/bootstrap/js/bootstrap2-typeahead.min.js</code>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                NEW: Portfolio Page using jQuery Mixitup Plugin
                                <ul>
                                    <li>Added html file: <code>page_portfolio.html</code></li>
                                    <li>Added css file: <code>assets/css/pages/portfolio.css</code></li>
                                    <li>Added js files: <code>assets/scripts/portfolio.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Toastr Notifications
                                <ul>
                                    <li>Added html file: <code>ui_toastr.html</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-toastr/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap FuelUX Tree View
                                <ul>
                                    <li>Added html file: <code>ui_tree.html</code></li>
                                    <li>Added js file: <code>ui_tree.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/fuelux/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap FuelUX Form Input Spinners
                                <ul>
                                    <li>Added html file: <code>form_component.html</code></li>
                                    <li>Modified js file: <code>form_component.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/fuelux/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: IonRange Sliders
                                <ul>
                                    <li>Added html file: <code>ui_ion_sliders.html</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/ion.rangeslider/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: NoUI Range Sliders
                                <ul>
                                    <li>Added html file: <code>ui_noui_sliders.html</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/nouislider/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery 1.10.2
                                <ul>
                                    <li>Updated file: <code>../assets/global/plugins/jquery-1.10.2.min.js</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Colorpicker
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-colorpicker</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Datepicker
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-datepicker</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Datepicker
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-datepicker</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Daterangepicker v1.2
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-daterangepicker</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Datetimepicker
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-datetimepicker</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap X-Editable v1.4.6(Bootstrap 3.0 support implemented by KeenThemes)
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-editable</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Switch v1.8
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-switch</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Timepicker
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-timepicker</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Bootstrap Wizard
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap-wizard</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Clockface Timepicker v1.0.0
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/clockface</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Dropzone Plugin
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/dropzone</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Font Awesome 3.2.1
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/font-awesome</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery File Upload v5.32.3
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/jquery-file-upload</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery MultiSelect v0.9.8
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/jquery-multi-select</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest jQuery Slimscroll v1.3.1
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/jquery-slimscroll</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Latest Select2 v3.4.3
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/select2</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Global Code Enhancement with Bootstrap 3.0 Support
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified css file: <code>all css files</code></li>
                                    <li>Modified javascript file: <code>all js files</code></li>
                                </ul>
                            </li>
                            <li>
                                DROPPED: jQueryUI Datepicker
                                <ul>
                                    <li>Use Bootstrap Datepicker as a replacement</li>
                                </ul>
                            </li>
                            <li>
                                DROPPED: jQueryUI Dialogs
                                <ul>
                                    <li>Use Bootstrap Modal or Bootstrap Toastr Notifications as a replacement</li>
                                </ul>
                            </li>
                            <li>
                                DROPPED: jQuery Chosen
                                <ul>
                                    <li>Use Select2 as a replacement</li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.4 – 29 June 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Added Recent Activities Portlet in the Dashboard
                                <ul>
                                    <li>Modified html file: <code>index.html</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Todo/Tasks Portlet in the Dashboard
                                <ul>
                                    <li>Modified html file: <code>index.html</code></li>
                                    <li>Added style file: <code>assets/css/pages/tasks.html</code></li>
                                    <li>Added javascript file: <code>assets/scripts/tasks.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap X-editable Plugin Integration
                                <ul>
                                    <li>Added html file: <code>form_editable.html</code></li>
                                    <li>Added javascript file: <code>assets/scripts/form-editable.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-editable/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Image Crop Plugin Integration
                                <ul>
                                    <li>Added html file: <code>form_image_crop.html</code></li>
                                    <li>Added javascript file: <code>assets/scripts/form-image-crop.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/jcrop/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Switch Plugin Integration
                                <ul>
                                    <li>Added html file: <code>form_components.html</code></li>
                                    <li>Added javascript file: <code>assets/scripts/form-components.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-switch/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Language Switching Bar
                                <ul>
                                    <li>Added html file: <code>layout_language_bar.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Samples For Ajax Username Availability Checking
                                <ul>
                                    <li>Modified html file: <code>form_components.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Samples For Password Strength Checking
                                <ul>
                                    <li>Modified html file: <code>form_components.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Loading Indicator(Spinner) In Form Inputs
                                <ul>
                                    <li>Modified html file: <code>form_components.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Hoverable Dropdown Plugin Integration
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-hover-dropdown/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Notification Badges for Sidebar Menu, Top Bar User Menu and Bootsrap Dropdowns
                                <ul>
                                    <li>Modified html file: <code>all html files</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Full Screen Mode Toggle Link Under The User Top Menu
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: The Sidebar Menu's Submenu Auto Scroll/Focus on Expand
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Scrollable Top Bar Notifications(Inbox, Notifications, Tasks)
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Add Address Fields in Registration Form(Address, City, Country)
                                <ul>
                                    <li>Modified html files: <code>login.html</code> <code>login-soft.html</code></li>
                                    <li>Modified style files: <code>assets/css/pages/login.css</code> <code>assets/css/pages/login-soft.css</code> </li>
                                    <li>Modified javascript files: <code>assets/scripts/login.js</code> <code>assets/scripts/login-soft.js</code> </li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Change Non-Responsive Boxed Page Layout Width to 1000px 
                                <ul>
                                    <li>Modified style file: <code>assets/css/style-non-responsive.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Added Form Validation Samples for WYSIHTML5 Editor and CKEditor
                                <ul>
                                    <li>Modified html file: <code>form_validation.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-validation.js</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Enabled Login Form Submit Based on Form's action attribute
                                <ul>
                                    <li>Modified html files: <code>login.html</code> <code>login-soft.html</code></li>
                                    <li>Modified javascript files: <code>assets/scripts/login.js</code> <code>assets/scripts/login-soft.js</code> </li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Added Samples For Toolbar Containing of Buttons & Button Dropdowns 
                                <ul>
                                    <li>Modified html file: <code>ui_buttons.html</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Added Samples For Popovers & Tooltips in Slim Scroll Container
                                <ul>
                                    <li>Modified html file: <code>ui-general.html</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Modal Dialogs with Slim Scroll Content 
                                <ul>
                                    <li>Modified html file: <code>ui_modals.html</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Bootstrap 2.3.2
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/bootstrap/</code></li>
                                </ul>
                            </li>
                            <li>
                                UPGRADE: Select2 3.4.1
                                <ul>
                                    <li>Updated folder: <code>../assets/global/plugins/select2/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Missing Images For DataTabeles Column Order Disabled State 
                                <ul>
                                    <li>Added image files: <code>assets/data-tables/images/sort_asc_disabled.png</code> <code>assets/data-tables/images/sort_desc_disabled.png</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Uniform Checkbox & Radio Button Disabled State Bug 
                                <ul>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Updated image file: <code>../assets/global/plugins/uniform/images/sprite.png</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Slim Scroll Container's Height Issue(content is fully expanded before Slim Scroller initialization)
                                <ul>
                                    <li>Modified html file: <code>index.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Nested Portlets Issue
                                <ul>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Page Breadcrumb Overlapping Issue on IE8
                                <ul>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Inbox Ajax Load Issue On Chrome(412 error)
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/inbox.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Select2 Z-Index Issue on Modals
                                <ul>
                                    <li>Modified style file: <code>../assets/global/plugins/select2/select2_metro.css</code></li>
                                    <li>Modified style file: <code>assets/css/style-metro.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Fix Form Input Height on Mobile Devices 
                                <ul>
                                    <li>Modified style file: <code>assets/css/style-metro.css</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.3 – 14 June 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Layout Options(Boxed Layout, Non-Responsive Boxed Layout, Fixed Footer, Fixed Sidebar)
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified style file: <code>assets/css/style-responsive.css</code></li>
                                    <li>Added style file:   <code>assets/css/style-non-responsive.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Switching Back to LTR from RTL Version(Multi lingual RTL & LTR Support)
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Modified style files: <code>all css files under assets/css/*</code></li>
                                    <li>Modified javascript files: <code>all javascript files under assets/scripts/*</code></li>
                                    <li>Modified plugin files: <code>all plugins files & folders under ../assets/global/plugins/*</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Complete Grey Theme Color
                                <ul>
                                    <li>Modified html files: <code>all html files</code></li>
                                    <li>Added style files: <code>assets/css/themes/grey.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: jQuery Multi Select
                                <ul>
                                    <li>Modified html files: <code>form_comonents.html</code></li>
                                    <li>Modified style file: <code>aassets/css/style.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/jquery-multi-select/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Bootstrap Extended Modals
                                <ul>
                                    <li>Modified html files: <code>ui_modals.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified style file: <code>assets/css/style-metro.css</code></li>
                                    <li>Added javascript file: <code>assets/scripts/ui-modals.js</code></li>
                                    <li>Added plugin folder: <code>../assets/global/plugins/bootstrap-modal/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Timeline Page
                                <ul>
                                    <li>Added html file: <code>page_timeline.html</code></li>
                                    <li>Added css file: <code>assets/css/pages/timeline.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: New Login Form Option
                                <ul>
                                    <li>Added html file: <code>login_soft.html</code></li>
                                    <li>Modified style file: <code>assets/css/pages/login-soft.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Advanced Data Table Samples(Responsive Datatable with Expandable Row Details & Datatable with Show/Hide Column Options)
                                <ul>
                                    <li>Added html file: <code>table_advanced.html</code></li>
                                    <li>Added javascript file: <code>assets/scripts/table-advanced.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 404 Error Page Option #1
                                <ul>
                                    <li>Added html file: <code>extra_404_option1.html</code></li>
                                    <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 404 Error Page Option #2
                                <ul>
                                    <li>Added html file: <code>extra_404_option2.html</code></li>
                                    <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 404 Error Page Option #3
                                <ul>
                                    <li>Added html file: <code>extra_404_option3.html</code></li>
                                    <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                                    <li>Added image: <code>assets/img/pages/earth.jpg</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 500 Error Page Option #1
                                <ul>
                                    <li>Added html file: <code>extra_500_option1.html</code></li>
                                    <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: 500 Error Page Option #2
                                <ul>
                                    <li>Added html file: <code>extra_500_option2.html</code></li>
                                    <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: More Plot Pie Chart Samples
                                <ul>
                                    <li>Added html file: <code>charts.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/charts.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: jQuery Migrate v1.2.1 Plugin(used with jQuery 1.10.1 for the backward compatability)
                                <ul>
                                    <li>Added javascript file: <code>../assets/global/plugins/jquery-migrate-1.2.1.min.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Added Instagram & VK Social Icons
                                <ul>
                                    <li>Modifed style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Improved Footer, Header & Sidebar Menu
                                <ul>
                                    <li>Modified html file: <code>all html files</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified style file: <code>assets/css/style-responsive.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Scrollable Accordions(auto focus accordion content on click)
                                <ul>
                                    <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Flexible Left & Right Aligned Tabs with Auto Handled Min Height Tab Content(now it works fine when tab has less content)
                                <ul>
                                    <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Activate Tab by URL parameter(e.g: page.html#tab_1)
                                <ul>
                                    <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Activate Accordion by URL parameter(e.g: page.html#section_1)
                                <ul>
                                    <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Scrollable Accordions(auto focus accordion content on click)
                                <ul>
                                    <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Dropdown Option with Multi Select Checkbox List
                                <ul>
                                    <li>Modified html file: <code>ui_buttons.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Form Validation in Form Wizard Steps
                                <ul>
                                    <li>Modified html file: <code>form_wizard.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-wizard.js</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Validating Select2 Dropdowns
                                <ul>
                                    <li>Modified html file: <code>form_validation.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form_validation.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                ENHANCEMENT: Select2 Dropdown UI
                                <ul>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified style file: <code>../assets/global/plugins/select2/select2_metro.css</code></li>
                                </ul>
                            </li>
                            <li>
                                UPDATES: Plugin & Resource Updates(Requires replacing files and folders entirely)
                                <ul>
                                    <li>
                                        Latest jQuery v1.10.1 <code>../assets/global/plugins/jquery-1.10.1.min.js</code>
                                    </li>
                                    <li>
                                        Latest FontAwesome v3.2.0 <code>../assets/global/plugins/font-awesome/</code>
                                    </li>
                                    <li>
                                        Latest Bootstrap Datepicker <code>../assets/global/plugins/bootstrap-datepicker/</code>
                                    </li>
                                    <li>
                                        Latest Bootstrap WYSIHTML5 <code>../assets/global/plugins/bootstrap-wysihtml5/</code>
                                    </li>
                                    <li> 
                                        Latest jQuery Datatables v1.9.4 <code>../assets/global/plugins/data-tables/</code>
                                    </li>
                                    <li> 
                                        Latest Dropzone v3.0 <code>../assets/global/plugins/dropzone/</code>
                                    </li>
                                    <li>
                                        Latest jQuery Flot Charts v0.8.1 <code>../assets/global/plugins/flot/</code>
                                    </li>
                                    <li>
                                        Latest jQuery GMaps v0.4.3 <code>../assets/global/plugins/gmaps/</code>
                                    </li>
                                    <li>
                                        Latest jQuery SlimScroll <code>../assets/global/plugins/jquery-slimscroll/</code>
                                    </li>
                                    <li>
                                        Latest jQuery Validation v1.11.1 <code>../assets/global/plugins/jquery-validation/</code>
                                    </li>
                                    <li>
                                        Latest jQuery Uniform v2.1.0 <code>../assets/global/plugins/uniform/</code>
                                    </li>
                                    <li>
                                        Latest jQuery BlockUI v2.59.0 <code>../assets/global/plugins/jquery.blockui.min.js</code>
                                    </li>
                                    <li>
                                        Latest jQuery Cookie v1.3.1 <code>../assets/global/plugins/jquery.cookie.min.js</code>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                FIX: Error On Using Multiple WYSIHTML5 Instances 
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-component.js</code></li>
                                    <li>Modified plugin files(requires replacing entire folder): <code>../assets/global/plugins/bootstrap-wysihtml5/</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Plot Pie Chart Hover Issue
                                <ul>
                                    <li>Modified html file: <code>charts.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/charts.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Z-Index Issue When Datepickers, Datetimepicker, Timepicker and Colorpickers used in Modals
                                <ul>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-component.js</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Placeholder Issue on Internet Explorer 8 & 9.
                                <ul>
                                    <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                                </ul>
                            </li>
                            <li>
                                RETIRED: BREAKPOINTS Plugin Not In Use Anymore
                                <ul>
                                    <li>Modified html file: <code>all html files</code></li>
                                    <li>Modified javascript file(implemented a function to handle the layout on window resize event): <code>assets/scripts/app.js</code></li>
                                    <li>Plugin folder: <code>../assets/global/plugins/breakpoints/</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.2.4 – 11 May 2013(Both LTR and RTL versions)</h4>
                        <ul>
                            <li>
                                NEW: Integrated jQuery UI Dialogs:
                                <ul>
                                    <li>Modified html file: <code>ui_jqueryui.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/ui-jqueryui.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Integrated Bootstrap Datatimepicker:
                                <ul>
                                    <li>Bootstrap Datatimepicker plugin added: <code>../assets/global/plugins/bootstrap-datatimepicker/</code></li>
                                    <li>Modified html file: <code>form_component.html</code></li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Dynamic Pagination - jQuery Bootpad:
                                <ul>
                                    <li>jQuery Bootpad plugin added: <code>../assets/global/plugins/jquery.bootpag.min,js</code></li>
                                    <li>Modified html file: <code>ui_general.html</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/ui-general.js</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Cooming Soon Page:
                                <ul>
                                    <li>Added html file: <code>page_coming_soon.html</code></li>
                                    <li>Added style file: <code>assets/css/pages/coming-soon.css</code></li>
                                    <li>Added javascript file: <code>assets/scripts/coming-soon.js</code></li>
                                    <li>jQuery Countdown plugin added: <code>../assets/global/plugins/countdown/</code></li>
                                    <li>jQuery Backstretch plugin added: <code>../assets/global/plugins/backstretch/</code></li>
                                    <li>Background images added: <code>assets/img/bg/</code></li>
                                </ul>
                            </li>
                            <li>
                                NEW: Lock Screen:
                                <ul>
                                    <li>Added html file: <code>extra_lock.html</code></li>
                                    <li>Added style file: <code>assets/css/pages/lock.css</code></li>
                                    <li>Added javascript file: <code>assets/scripts/lock.js</code></li>
                                    <li>jQuery Backstretch plugin added: <code>../assets/global/plugins/backstretch/</code></li>
                                    <li>Background images added: <code>assets/img/bg/</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Select2 Dropdowns Integration with Advance Form Layouts:
                                <ul>
                                    <li>Please use Select2 instead of Chosen since Select2 works very well with bootstrap in responsive layouts</li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified html page: <code>form_samples.html</code></li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: Bootstrap Datepicker UI:
                                <ul>
                                    <li>The datepicker UI modified to give more Metro style</li>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified plugin javascript file: <code>../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js
                                        </code>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                IMPROVEMENT: FullCalendar Colorful Events:
                                <ul>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/index.js</code></li>
                                    <li>Modified javascript file: <code>assets/scripts/calendar.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: FancyBox Image Preview Overlapped by the Fixed Footer:
                                <ul>
                                    <li>Modified style file: <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Select2 diselect icon position issue for RTL version:
                                <ul>
                                    <li>Modified style file: <code>../assets/global/plugins/select2/select2_metro.css</code></li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Info block alignment in RTL Version -> Extra -> Search Results -> Booking Search:
                                <ul>
                                    <li>Modified style file: <code>assets/extra_search.html</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.2.3 – 3 May 2013</h4>
                        <ul>
                            <li>
                                NEW: Full RTL(Right To Left) Support:
                                <ul>
                                    <li>Created a new folder <code>template_content_rtl</code> for RTL version</li>
                                    <li>The theme layout, all the html templates and the plugins converted to RTL version</li>
                                </ul>
                            </li>
                            <li>
                                NEW: Loading Page Content via Ajax:
                                <ul>
                                    <li>Added a new sample page: <code>layout_ajax.html</code></li>
                                    <li>Added loading image for ajax content loading process bar: <code>assets/img/ajax-loading.gif</code></li>
                                    <li>Modified the main script file: <code>assets/scripts/app.js</code>
                                </ul>
                            </li>
                            <li>
                                NEW: Responsive Data Tables:
                                <ul>
                                    <li>Added a new sample page: <code>table_responsive.html</code></li>
                                    <li>Modified the main css file: <code>assets/css/style.css</code>
                                </ul>
                            </li>
                            <li>
                                NEW: About Us Page
                                <ul>
                                    <li>Added a new sample page: <code>page_about.html</code></li>
                                    <li>Added a new css file: <code>assets/css/pages/about-us.css</code>
                                </ul>
                            </li>
                            <li>
                                NEW: Contact Us Page
                                <ul>
                                    <li>Added a new sample page: <code>page_contact.html</code></li>
                                    <li>Added a new javascript file: <code>assets/scripts/contact-us.js</code>
                                </ul>
                            </li>
                            <li>
                                NEW: Enhanced Bootstrap Datapicker from 
                                <ul>
                                    <li>Current Bootstrap Datepicker plugin replaced with a better one from
                                        <a href="https://github.com/eternicode/bootstrap-datepicker"></a>
                                    </li>
                                    <li>The plugin assets<code>../assets/global/plugins/bootstrap-datepicker</code> and demo samples are not modified since this new plugins is fully compatible enhanced version of the previouse one.</li>
                                </ul>
                            </li>
                            <li>
                                FIXED: Broken Portlet Header Issue on Webkit Browsers
                                <ul>
                                    <li>Modified portlet HTML mackup and the main css file <code>assets/css/style.css</code></li>
                                </ul>
                            </li>
                        </ul>
                        <br>
                        <h4>Version 1.2.2 – 22 April 2013</h4>
                        <ul>
                            <li>NEW: Combined Horizontal & Sidebar Menu Layout</li>
                            <li>NEW: Promo Page Layout</li>
                            <li>NEW: Sidebar Closed Page Layout</li>
                            <li>NEW: Blog Page</li>
                            <li>NEW: News Page</li>
                            <li>NEW: Integrated jQuery UI Datepicker</li>
                            <li>NEW: Social Icons</li>
                            <li>FIXED: Some minor bug fixing</li>
                        </ul>
                        <br>
                        <h4>Version 1.2.1 – 13 April 2013</h4>
                        <ul>
                            <li>NEW: Easy Pie Charts in Dashboard</li>
                            <li>NEW: Sparklines Charts in Dashboard</li>
                            <li>NEW: Form Input Masks</li>
                            <li>NEW: Ip Address Input Control</li>
                            <li>NEW: Search Page Options(Image Search, Booking Search)</li>
                            <li>NEW: Pricing Table Option</li>
                            <li>FIXED: Some minor bug fixing</li>
                        </ul>
                        <br>
                        <h4>Version 1.2 – 10 April 2013</h4>
                        <ul>
                            <li>NEW: Email Templates(email1.html, email2.html, email3.html, email4.html, email5.html, email6.html)</li>
                            <li>NEW: Multi Level Horizontal Menu(horizontal_menu1.html, horizontal_menu2.html,)</li>
                            <li>NEW: 4 Level Sidebar Menu(index.html)</li>
                            <li>NEW: Full Featured Inbox(inbox.html)</li>
                            <li>NEW: Integrated jQuery Select2(form_component.html)</li>
                            <li>NEW: Country List with Flags(form_component.html)</li>
                            <li>NEW: Printable Invoice(extra_invoice.html)</li>
                            <li>UPGRADE: Latest jQuery FullCalendar v1.6.0 Integration(calendar.html)</li>
                            <li>IMPROVEMENT: Sidebar Main Menu Code Optimization</li>
                            <li>IMPROVEMENT: Javascript Optimization(Core and demo functionalities put in seperated files)</li>
                            <li>IMPROVEMENT: CSS Optimization(Core and page level styles put in seperated files)</li>
                            <li>IMPROVEMENT: Assets File Structure Optimized(resources and plugins categorized in seperate folders)</li>
                            <li>FIXED: Some minor bug fixing</li>
                        </ul>
                        <br>
                        <h4>Version 1.1.2 – 17 March 2013</h4>
                        <ul>
                            <li>NEW: Advance Form Samples(form_samples.html)</li>
                            <li>NEW: Advance Form Validation(form_validation.html)</li>
                            <li>NEW: Integrated Tree Views(ui_tree.html)</li>
                            <li>NEW: Integrated Nestable Lists(ui_nestable.html)</li>
                            <li>NEW: Touch Support For Sliders(ui_sliders.html)</li>
                            <li>IMPROVEMENT: Some code improvements</li>
                            <li>FIXED: Some minor bug fixing</li>
                        </ul>
                        <br>
                        <h4>Version 1.1.1 – 10 March 2013</h4>
                        <ul>
                            <li>NEW: Integrated jQuery UI Sliders(ui_sliders.html)</li>
                            <li>NEW: jQuery Knob - Circle Dials(ui_sliders.html)</li>
                            <li>NEW: Windows 8 Style Tiles(ui_tiles.html)</li>
                            <li>NEW: Integrate Multiple File Upload(form_fileupload.html)</li>
                            <li>NEW: Integrated Dropzone File Upload(form_dropzone.html)</li>
                            <li>NEW: Inline Editable Data Tables(table_editable.html)</li>
                            <li>NEW: Full Width Page Layout(extra_full_width.html)</li>
                            <li>NEW: Draggable Portlets Moved To a Seperate Page(portlet_draggable.html)</li>
                            <li>UPGRADE: Twitter Bootstrap v2.3.2</li>
                            <li>IMPROVEMENT: Some code improvements</li>
                            <li>FIXED: Some minor bug fixing</li>
                        </ul>
                        <br>
                        <h4>Version 1.1 – 26 February 2013</h4>
                        <ul>
                            <li>NEW: GLYPHICONS PRO package(Value $59)</li>
                            <li>NEW: Show/hide sidebar</li>
                            <li>NEW: Dragable portlets</li>
                            <li>NEW: Buttons/dropdowns/pagination in portlet headers</li>
                            <li>NEW: Styled accordions</li>
                            <li>NEW: User profile page</li>
                            <li>NEW: FAQ rage</li>
                            <li>NEW: Search results page</li>
                            <li>NEW: Invoice rage</li>
                            <li>NEW: Bordered form Layout</li>
                            <li>NEW: 2 new heme colors</li>
                            <li>FIXED: Some minor bug fixing</li>
                            <li>IMPROVEMENT: Some code improvements</li>
                        </ul>
                        <br>
                        <h4>Version 1.0 – 13 February 2013</h4>
                        <ul>
                            <li>Initial release</li>
                        </ul>
                    </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="upgrade">
                        <div class="page-header">
                            <h1>15. Upgrade</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>

                        <h4>Upgrade to v4.5.6</h4>
                        <p>
                            Just replace the assets folder or refer to the above changelog.
                        </p> 

                        <h4>Upgrade to v4.5.5</h4>
                        <p>
                            Just replace the assets folder or refer to the above changelog.
                        </p> 

                        <h4>Upgrade to v4.5.4</h4>
                        <p>
                            Just replace the assets folder or refer to the above changelog.
                        </p>
                        
                        <h4>Upgrade to v4.5.1</h4>
                        <p>
                            Just replace the assets folder or refer to the above changelog.
                        </p>

                        <h4>Upgrade to v4.0</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        
                        <h4>Upgrade to v3.8.x</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        <h4>Upgrade to v3.7.x</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        <h4>Upgrade to v3.6.x</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        <h4>Upgrade to v3.5.x</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        <h4>Upgrade to v3.3.x</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        <h4>Upgrade to v3.2.0</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        <h4>Upgrade from v3.1.2 to v3.1.3</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p> 
                        <h4>Upgrade from v3.1.1 to v3.1.2</h4>
                        <p>
                        Just replace the assets folder or refer to the above changelog.
                        </p>   
                         <h4>Upgrade from v3.1 to v3.1.1</h4>
                        <p>
                        Just replace the assets folder and refer to the above changelog.
                        </p>   
                        <h4>Upgrade from v3.0.x to v3.1</h4>
                        <p>
                        Just replace the assets folder and refer to the above changelog.
                        </p>   

                        <h4>Upgrade to v3.0.1</h4>
                        <p>
                        Just replace the assets folder and refer to the above changelog.
                        </p>   

                        <h4>Upgrade to v3.x</h4>
                        <p>
                        The latest Metronic v3.x is completely rewriten using a new folder structure(multi themes within single framework) with SASS support.
                        So you will need to update your entire HTML code and assets folder. 
                        </p>    


                        <h4>Upgrade From v1.5.x To v2.x</h4>
                        <p>
                            Just replace the assets folder with the latest one(merge back your own changes if you have done any) and update html codes of header, footer & sidebar.
                        </p>
                        <h4>Upgrade From v1.4.x To v2.x</h4>
                        <p>
                            Since v1.5.x came with Bootstrap 3.0 support, we have changed and edited the entire theme and updated most of the 3rd party plugins and resources. 
                            The best practice for 2.x to 3.0 migration will be, to update your page header, top bar menu, sidebar menu and footer part first. Then proceed with content and UI components.
                        </p>
                        <p>
                        <h3>Major Metronic Class Changes</h3>
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Older Versions</th>
                                    <th>Metronic 1.5</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>.m-wrap</code></td>
                                    <td><code>.form-control</code></td>
                                </tr>
                                <tr>
                                    <td><code>.btn</code></td>
                                    <td><code>.btn .default</code></td>
                                </tr>
                                <tr>
                                    <td><code>.xsmall</code></td>
                                    <td><code>.input-xsmall</code></td>
                                </tr>
                                <tr>
                                    <td><code>.small</code></td>
                                    <td><code>.input-small</code></td>
                                </tr>
                                <tr>
                                    <td><code>.medium</code></td>
                                    <td><code>.input-medium</code></td>
                                </tr>
                                <tr>
                                    <td><code>.large</code></td>
                                    <td><code>.input-large</code></td>
                                </tr>
                            </tbody>
                        </table>
                        <h3>Major Bootstrap Class Changes</h3>
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Bootstrap 2.x</th>
                                    <th>Bootstrap 3.0</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>.container-fluid</code></td>
                                    <td><code>.container</code></td>
                                </tr>
                                <tr>
                                    <td><code>.row-fluid</code></td>
                                    <td><code>.row</code></td>
                                </tr>
                                <tr>
                                    <td><code>.span*</code></td>
                                    <td><code>.col-md-*</code></td>
                                </tr>
                                <tr>
                                    <td><code>.offset*</code></td>
                                    <td><code>.col-md-offset-*</code></td>
                                </tr>
                                <tr>
                                    <td><code>.brand</code></td>
                                    <td><code>.navbar-brand</code></td>
                                </tr>
                                <tr>
                                    <td><code>.nav-collapse</code></td>
                                    <td><code>.navbar-collapse</code></td>
                                </tr>
                                <tr>
                                    <td><code>.nav-toggle</code></td>
                                    <td><code>.navbar-toggle</code></td>
                                </tr>
                                <tr>
                                    <td><code>.btn-navbar</code></td>
                                    <td><code>.navbar-btn</code></td>
                                </tr>
                                <tr>
                                    <td><code>.hero-unit</code></td>
                                    <td><code>.jumbotron</code></td>
                                </tr>
                                <tr>
                                    <td><code>.icon-*</code></td>
                                    <td><code>.glyphicon .glyphicon-*</code></td>
                                </tr>
                                <tr>
                                    <td><code>.btn</code></td>
                                    <td><code>.btn .btn-default</code></td>
                                </tr>
                                <tr>
                                    <td><code>.btn-mini</code></td>
                                    <td><code>.btn-xs</code></td>
                                </tr>
                                <tr>
                                    <td><code>.btn-small</code></td>
                                    <td><code>.btn-sm</code></td>
                                </tr>
                                <tr>
                                    <td><code>.btn-large</code></td>
                                    <td><code>.btn-lg</code></td>
                                </tr>
                                <tr>
                                    <td><code>.visible-phone</code></td>
                                    <td><code>.visible-sm</code></td>
                                </tr>
                                <tr>
                                    <td><code>.visible-tablet</code></td>
                                    <td><code>.visible-md</code></td>
                                </tr>
                                <tr>
                                    <td><code>.visible-desktop</code></td>
                                    <td><code>.visible-lg</code></td>
                                </tr>
                                <tr>
                                    <td><code>.hidden-phone</code></td>
                                    <td><code>.hidden-sm</code></td>
                                </tr>
                                <tr>
                                    <td><code>.hidden-tablet</code></td>
                                    <td><code>.hidden-md</code></td>
                                </tr>
                                <tr>
                                    <td><code>.hidden-desktop</code></td>
                                    <td><code>.hidden-lg</code></td>
                                </tr>
                                <tr>
                                    <td><code>.input-small</code></td>
                                    <td><code>.input-sm</code></td>
                                </tr>
                                <tr>
                                    <td><code>.input-large</code></td>
                                    <td><code>.input-lg</code></td>
                                </tr>
                                <tr>
                                    <td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
                                    <td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
                                </tr>
                                <tr>
                                    <td><code>.input-prepend</code> <code>.input-append</code></td>
                                    <td><code>.input-group</code></td>
                                </tr>
                                <tr>
                                    <td><code>.add-on</code></td>
                                    <td><code>.input-group-addon</code></td>
                                </tr>
                                <tr>
                                    <td><code>.thumbnail</code></td>
                                    <td><code>.img-thumbnail</code></td>
                                </tr>
                                <tr>
                                    <td><code>ul.unstyled</code></td>
                                    <td><code>.list-unstyled</code></td>
                                </tr>
                                <tr>
                                    <td><code>ul.inline</code></td>
                                    <td><code>.list-inline</code></td>
                                </tr>
                            </tbody>
                        </table>
                        </p>
                        <p>
                            Please check out <a href="http://getbootstrap.com/getting-started/#migration">http://getbootstrap.com/getting-started/#migration</a> to learn more about Bootstrap 2.x to 3.0 migration.
                        </p>
                        <p>
                            Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at <a href="mailto:support@keenthemes.com">support@keenthemes.com</a>
                        </p>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <section id="end">
                        <div class="page-header">
                            <h1>16. End Of Documentation</h1>
                            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                        </div>
                        <p>
                            Once again, thanks for purchasing App. We hope you will enjoy using it for your next project.
                        </p>
                    </section>
                </div>
            </div>
        </div>
        <!-- END -->
        <footer class="footer">
            <div class="container container-narrow">
                <p>Metronic - Admin Dashboard Template. Designed and built with love by <a href="http://www.keenthemes.com" target="_blank">keenthemes</a> 
            </div>
        </footer>
        <!-- Le javascript
            ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="assets/js/jquery-1.8.3.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/google-code-prettify/prettify.js"></script>
        <script src="assets/js/application.js"></script>
    </body>
</html>